Javascript-форум (https://javascript.ru/forum/)
-   jQuery (https://javascript.ru/forum/jquery/)
-   -   Пауза перед увеличением картини (https://javascript.ru/forum/jquery/15328-pauza-pered-uvelicheniem-kartini.html)

tazododu 22.02.2011 16:04

Пауза перед увеличением картини
 
Всем привет!!

Для увеличения картинки юзаю следующий скрипт

$("#goods_list_block .one_pp_wrap .pp_pic .product_pic").hover(
	function(){
		var name = $(this).attr('id');
		var pic_src = 'http://zakupka-images.s3.amazonaws.com/m_' + name;
		$(this).find("img").attr("src",pic_src);
	},
	function(){
		var name = $(this).attr('id');
		var pic_src = 'http://zakupka-images.s3.amazonaws.com/s_' + name;
		$(this).find("img").attr("src",pic_src);
	}
)


Работает правильно. Возникла необходимость сделать увеличение через 1 секунду после наведения на картинку. Если же за это время курсор отодвинули, картинку не менять.

Пробывал и так и сяк, ничего не получается. Прошу вашей помощи:help:

FINoM 23.02.2011 05:36

Немного говнокод, так как для более изящного решения нужно всё переписать :)
var show;
$("#goods_list_block .one_pp_wrap .pp_pic .product_pic").hover(
	function(){
        show = true;
		var name = $(this).attr('id');
		var pic_src = 'http://zakupka-images.s3.amazonaws.com/m_' + name;
		$(this).find("img").attr("src",pic_src);
                setTimeOut(function(){
                        show = false;
                },1000)
	},
	function(){
        if (!show) return false;
		var name = $(this).attr('id');
		var pic_src = 'http://zakupka-images.s3.amazonaws.com/s_' + name;
		$(this).find("img").attr("src",pic_src);
	}
)

tazododu 23.02.2011 10:11

FINoM
код работает неправильно, он в любом случае увеличивает картинку :(

micscr 23.02.2011 12:20

var isIn = false; //  глобальные переменные
var newSrc = ''; // 
var obj = null;   // 
function doAfterSec(){
  if (!isIn) return;
  obj.attr('src', newSrc);
}
$("#goods_list_block .one_pp_wrap .pp_pic .product_pic").hover(
    function(){
        isIn = true;
        var name = $(this).attr('id');
        newSrc  = 'http://zakupka-images.s3.amazonaws.com/m_' + name;
        obj = $(this).find("img");
        setTimeout(doAfterSec, 1000);
    },
    function(){
        isIn = false;
        var name = $(this).attr('id');
        var pic_src = 'http://zakupka-images.s3.amazonaws.com/s_' + name;
        $(this).find("img").attr("src",pic_src);
    }
)

можно в принципе и clearTimeout использовать. кому как нравиться.

tazododu 23.02.2011 13:58

micscr
Спасибо за помощь!! Интересный подход, взял а заметку)


Часовой пояс GMT +3, время: 12:59.