jquery смена картинок
 

Дорогие форумчане!

Подскажите пожалуйста - мне надо при нажатии плавно сделать картинку прозрачной потом поменять ее и сделать снова видимой.

Код:

$("#largeImg").animate({opacity: "0.1"}, 1200);

var largePath = $(this).attr("href");
var largeAlt = $(this).attr("title");

$("#largeImg").attr({ src: largePath, alt: largeAlt });
$("#largeImg").animate({opacity: "1"}, 1200)
return false;

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


Спасибо

mihalich_x, потому как ты не дожидаешся окончания затухания... Вызвал затухание - далее используй
http://javascript.ru/setTimeout

В котором и сделаешь все остальное. Только время паузы нужно правильно подобрать... ;)

ksa,
уже и это пробовал - ничего не получается - меняет картинку сразу...

Вот код

<script type="text/javascript">
$(document).ready(function(){

	$(".thumbs a").click(function(){
	    
		$("#largeImg").animate({opacity: "0.1"}, 1200);
		
        var largePath = $(this).attr("href");
		var largeAlt = $(this).attr("title");

        setTimeout($("#largeImg").attr({ src: largePath, alt: largeAlt }), 10000)

		 return false;
	});
	
});
</script>

Может как то можно чтобы сначала запустилось одно потом другое... там наверно потоки разные поэтому и не получается мне кажется дело именно в jquery

Не так ты пробовал... :)

Структура примерно такая

// Запустил затухание
setTimeout( 
   function () {
      // Тут меняешь картинку
      // Тут запускаешь появление картинки
   }, <нужная_пауза>
)

ksa,
Огромное спасибо работает!!! низкий поклон. Вот что получилось:

<script type="text/javascript">
$(document).ready(function(){

	$(".thumbs a").click(function(){
	    
		$("#largeImg").animate({opacity: "0"}, 500);
	      var largePath = $(this).attr("href");
		var largeAlt = $(this).attr("title");	
		
setTimeout( 
   function () {

		$("#largeImg").attr({ src: largePath, alt: largeAlt });
		$("#largeImg").animate({opacity: "1"}, 500);
   },500
)


		 return false;
	});
	
});
</script>