jQuery: Смена картинки при fadeOut - fadeIn.

[IF]

jQuery: Смена картинки при fadeOut - fadeIn.

пишу

<img id="pict1" src="">

<script type="text/javascript">
<!--
$("#pict1").attr("src", "pict/1.jpg");
$("#pict1").fadeOut("slow");
$("#pict1").attr("src", "pict/2.jpg");
$("#pict1").fadeIn("slow");
//-->
</script>

и смены картинки не происходит, видим только картинку №2

где косяк?

 

[Alexandre]

и смены картинки не происходит, видим только картинку №2

а по какому событию должна происходить смена картинки?

 

[MiRacLe]

<?php
$a = 1;
echo 'кто здесь?';
$a = 2;
echo $a;
?>

и смены $a не происходит, видим только двойку

где косяк?

-~{}~ 02.04.08 12:01:

hint: анимация jQuery выполняется асинхронно..., у всех асинхронных методов есть callback-и

 

[IF]

у всех асинхронных методов есть callback-и

Я пытался воткнуть $("#pict1").attr("src", "pict/2.jpg") в callback fadeOut, но выдаёт ошибку библиотеки.
видимо что-то не то делаю.:/

 

[MiRacLe]

"если совсем ничего не помогает, попробуйте наконец открыть документацию" ©

 

[IF]

Alexandre

а по какому событию должна происходить смена картинки?

Ну можно прикрутить событие (клик, к примеру), какая разница?
Идея то не просто поменять картинку, а сначала одну загасить медленно, а потом другую явить.
просто менять, чтобы они потом медленно появлялись -
onClick = '$("#pict1").attr("src", "pict/2.jpg"); $("#pict1").hide(); $("#pict1").fadeIn("slow"); return false;'

 

[diamond_krnl]

у вас не вижу:

$(document).ready(function(){
// здесь много разного кода
});

может в этом трабл?

 

[IF]

diamond_krnl

может в этом трабл?

Ну если я по клику активизирую скрипт, ясное дело, что страница загрузилась. Клик работает значит и DOM работает.

 

[Luerssen]

.att().hide().fadeIn();

Используй цепи )

 

[IF]

Luerssen

Используй цепи )

Merci
Если бы они ещё и задачу решили )

 

[-SkyNet-]

вариантов много

у callback'ов есть небольшой недостаток - не получится сделать цикл

предлагаю функцию, которая сама себе передает i++ номер картинки (картинка вида <img src='...' id='img1'>)
и пусть первая картинка изначально видима, остальные - нет

получится что-то типа:

showPic=function(i) {
  if($("#img"+i).length==0) i=0;
  setTimeOut("$('#img"+i+"').fadeOut(500)",600);
  setTimeOut("showPic("+(i+1)+")",2200);
}

 

[IF]

с сallback-ом разобрался. Надо обязательно подставить функцию

$('#my_id).fadeOut(700, function(){ ... });

просто выражение jQuery не прокатывает

-SkyNet-

у callback'ов есть небольшой недостаток - не получится сделать цикл

Это точно, сколько я не пытался такое как здесь http://www.dynamicdrive.com/dynamicindex14/swissarmy/index.htm
сделать с помощью jQuery не получалось. и плагинов не нашёл.
PS А вы свой вариант долго тестировали? стек не переполнится от бесконечной рекурсии?

 

[-SkyNet-]

IF проблем не возникало, пример реально живет в Сети.

для пущей уверенности в нужных местах добавляем

timeout_id=setTimeout(...);

и

clearTimeout(timeout_id);

повторюсь, на личном опыте с проблемой переполнения в данном примере не сталкивался - заданы жесткие временные интервалы, в стек не ломятся данные сразу и много.

 

[IF]

-SkyNet-
По моей ссылке картинки подгружаются последовательно, одна за одной
http://www.dynamicdrive.com/dynamicindex14/swissarmy/index.htm
а в вашем примере (очень похоже) они загружаются в процессе работы скрипта или их надо загрузить до.
А это очень большая разница.

По моей ссылке - очень классная замена флешки, в смысле последовательной загрузки картинок. Жаль, то в jQuery нет такого плагина.

 

[-SkyNet-]

неправда

все они лежат в контейнере <div id='rotate'></div> и имеют в css position:absolute;display:none

и только первый (нулевой) img видим

а способ удобен тем, что можно картинки предгрузить перед ротацией, используя плагин $.preload()
и запускать в цикле

var toPreload=[];
$("#rotate").each(function(){
  toPreload.push($(this).attr("src"));
});
$.preload(toPreload,{onFinish:function(){//callback по завершению предзагрузки всех из toPreload
  //стартуем ротацию
}});

либо, если Вам не нравится идея запускать ротацию после загрузки всех изображений, в плагине $.preload есть callback onComplete - задвайте порядковый номер, с какой загруженной картинки стартовать ротацию - и пользуйтесь им...

минимизированный плагин весит 1.53кб

не вижу причин отказываться от предзагрузки

кстати (не пробовал, но имхо) сомневаюсь, что механизмы различны для jpg и swf

к примеру, пыховая функция getimagesize для swf прекрасно работает! а, казалось бы...