http://nugle.jino.ru/slider/less1/ , на тяжелых изображениях анимация начинает глючить, пробую так, но не выходит
$('#miniImg img').live('click', function(){
href = $(this).attr('src');
$('#miniImg img').animate({'opacity': '0.5'}, 300);
$(this).animate({'opacity': '1'}, 300);
$('#mainImg img').ready(function(){
$(this).attr('src', href).css('opacity','0');
$(this).animate({'opacity' : '1'}, 500);
});
})
Спустя 2 часа, 6 минут, 36 секунд (3.06.2011 - 23:20) Arni написал(а):
Потому что надо просто напросто создать слой
Потом в css написать.
Ну и короче не мучаться.
<div id="preload1"></div>
Потом в css написать.
display: none;
background: url("../img/myimg.png");
Ну и короче не мучаться.
Спустя 8 часов, 50 минут, 33 секунды (4.06.2011 - 08:11) Эли4ка написал(а):
я всегда делала так,писала модальное окно и туда совала,но показывала только одно изображение.
Спустя 4 минуты, 46 секунд (4.06.2011 - 08:16) Эли4ка написал(а):
и пожалуйста пишите код хотя бы стилистически не тяжелым,ведь если вы напишете так
читать и знать где начинается другая функция намного легче,а для себя хоть в одну строчку пишите..
$('#miniImg img').live('click', function()
{
href = $(this).attr('src');
$('#miniImg img') .animate({'opacity': '0.5'}, 300);
$(this).animate({'opacity': '1'}, 300);
$('#mainImg img').ready(function(){
$(this).attr('src', href).css('opacity','0');
$(this).animate({'opacity' : '1'}, 500);
}
);
}
)
читать и знать где начинается другая функция намного легче,а для себя хоть в одну строчку пишите..
Спустя 1 час, 32 минуты (4.06.2011 - 09:48) nugle написал(а):
Arni
Эли4ка
спасибо, но изображение пусть крутится, а как мне остановить загрузку изображения до тех пор пока оно все целиком не загрузится?
Эли4ка
спасибо, но изображение пусть крутится, а как мне остановить загрузку изображения до тех пор пока оно все целиком не загрузится?
Спустя 1 час, 11 минут, 15 секунд (4.06.2011 - 10:59) Michael написал(а):
Метод ready используется на документе(начальная загрузка DOM), а не на отдельных элементах. Используй load
Спустя 10 минут, 30 секунд (4.06.2011 - 11:09) Arni написал(а):
Вчера как-то не особ вник, вижу еще одну проблему.
В animate можно передать еще функцию как параметр которая будет вызвана после того как свистопляска с аминированием будет закончена. Иначе действительно глючит я уже не раз с этим сталкивался. В момент пока еще работает анимация вызывается еще одна, и это уже начинает происходить одновременно. Как результат браузер просто сума сходит.
Тоисть как-то так
Ну вообще, я вот смотрю на этот код и просто вижу что делается таже ошибка что и у меня еще совсем недавно. Не нужно этот
Сунуть постояноно кудато в код. Нужно строить событейно ориентированную модель. ready должен срабатывать каждый раз как с документом что то происходет (точнее с дом). load она же дожидается полной загрузки документа. Потому модель эту можна построить более красиво.
В animate можно передать еще функцию как параметр которая будет вызвана после того как свистопляска с аминированием будет закончена. Иначе действительно глючит я уже не раз с этим сталкивался. В момент пока еще работает анимация вызывается еще одна, и это уже начинает происходить одновременно. Как результат браузер просто сума сходит.
Тоисть как-то так
$('#book').animate({
opacity: 0.25,
left: '+=50',
height: 'toggle'
}, 5000, function() {
// Анимация завершилась, можна что-то другое начать делать.
});
Ну вообще, я вот смотрю на этот код и просто вижу что делается таже ошибка что и у меня еще совсем недавно. Не нужно этот
$('#mainImg img').ready(function(){
$(this).attr('src', href).css('opacity','0');
$(this).animate({'opacity' : '1'}, 500);
}
Сунуть постояноно кудато в код. Нужно строить событейно ориентированную модель. ready должен срабатывать каждый раз как с документом что то происходет (точнее с дом). load она же дожидается полной загрузки документа. Потому модель эту можна построить более красиво.
Спустя 1 час, 5 минут, 23 секунды (4.06.2011 - 12:15) nugle написал(а):
Для чего это нужно, я ума не преложу что мне делать после анимации
Попробывал исправить на это, но все равно не работает
$('#book').animate({
opacity: 0.25,
left: '+=50',
height: 'toggle'
}, 5000, function() {
// Анимация завершилась, можна что-то другое начать делать.
});
Попробывал исправить на это, но все равно не работает
$('#mainImg img').load(function(){
$('#mainImg img').attr('src', href).css('opacity','0');
$('#mainImg img').animate({'opacity' : '1'}, 500);
});
Спустя 24 минуты, 51 секунда (4.06.2011 - 12:40) Arni написал(а):
| Цитата (nugle @ 4.06.2011 - 09:15) |
| Для чего это нужно, я ума не преложу что мне делать после анимации |
Потому что анимация запускается асинхронно. Тоисть ты стартовал анимацию, потом типа повесил обработчик в ощжидание события завершения построения дом. И тут подтянулась еще одна $(this).animate({'opacity' : '1'}, 500);. Которая пытается анимировать тот же #mainImg img.
Иными словами все работает несколько не так как ты это понимаешь (точнее мне показалось что ты не правильно понимаешь.).
Может ты думаеш что вторая анимация заупстится только когда первая закончила работу? Нет это не так. Отсюда еще один источник глюков. Именно поэтому я и предлагаю вторую анимацию запускать только когда первая точно отработала. Потому что временные задержки в яваскриптах любят круто подглючивать.
Спустя 1 час, 3 минуты, 46 секунд (4.06.2011 - 13:43) nugle написал(а):
да я так и думал раньше, только я все же и не понимаю, как изменить это так, чтобы работало
$('#mainImg img').load(function(){
$('#mainImg img').attr('src', href).css('opacity','0');
$('#mainImg img').animate({'opacity' : '1'}, 500);
});
Спустя 13 минут, 22 секунды (4.06.2011 - 13:57) Michael написал(а):
Мне кажется, ты наугад пытаешься что то сделать. Ну вот смысл в коде выше? Внутри лоада стоит смена src... Хотя должно быть - установка src. И уже по факту полной загрузки картинки вызовется load.