Событие "mouseleave" не всегда срабатывает, как побороть?

[Alex1233]

Есть много блоков, при наводке на которые срабатывает функция по их увеличению. Естественно если мышку уводить с них то все возвращается обратно.

Вот сама функция:

$(document).ready(function(){

	$("#list_wrap").on("mouseenter", ".list_box", function(){
	
			$('.mDem').stop();

			var $startWidth = $(this).find('img').width();
			var $startHeight = $(this).find('img').height();
			var $origWidth = $(this).find('img').attr('width');
			var $origHeight = $(this).find('img').attr('orh');
			
				
			$sdvigLeft = (($origWidth - $startWidth)/2)*(-1);
			$sdvigTop = (($origHeight - $startHeight)/2)*(-1);
			
			$dem = $(this).find('img');
			
			setTimeout(function() {
				$dem.animate({'marginLeft': $sdvigLeft + 'px', 'marginTop': $sdvigTop + 'px', 'width': $origWidth + 'px', 'position': 'absolute', 'maxWidth': '900px'}, 100);
			}, 500);

	}).on('mouseleave', '.list_box', function(){

			$(this).find('img').css({'marginLeft': '0', 'marginTop': '0', 'width': '310px', 'position': 'absolute', 'maxWidth': '100%'});

	});


});

Вот живой пример как все это работает (наброски): http://demotivatory.net/

Все работает как положено, но к сожалению только при условии если водить мышку очень медленно и без резких движений. Если же начать это делать резко и быстро, некоторые блоки не успевают уменьшаться и остаются в увеличенном виде. А еще периодически функция начинает обрабатываться не верно и картинка не сдвигается в нужное положение.

Как-то так, как на скриншоте ниже.

Однако вот тут: http://jquery-gp-gallery.ionelmc.ro/demo/

Как я не пытался подобной проблемы мне повторить не удалось. Подскажите, как нужно модернизировать данную функцию чтобы такой проблемы больше не появлялось?

[Alex1233]

Хотелось бы добиться точно такой же работы как в примере (http://jquery-gp-gallery.ionelmc.ro/demo/)

[рони]

Alex1233,
может без скрипта ?

.list_box img {
   -moz-transition: all 1s ease-out;
 -o-transition: all 1s ease-out;
 -webkit-transition: all 1s ease-out;
transition: all 1s ease-out;
 }

.list_box img:hover{
 -webkit-transition-delay: 0.5s;
  -moz-transition-delay: 0.5s;
 -o-transition-delay: 0.5s;
 transition-delay: 0.5s;

 -webkit-transform: scale(1.5);
 -moz-transform: scale(1.5);
 -o-transform: scale(1.5);
 transform: scale(1.5);
 }

[Alex1233]

рони, как вариант, спасибо =)

Сейчас поставил Ваш пример, правда немного ускорил его. Не знал что так можно =)

Но я так понимаю в данном случае будут увеличиваться абсолютно все картинки, даже те которые меньше изначальных высоты и ширины. И не до оригинальных размеров картинки, а ровно в 1,5 раза больше тех что были до наводки.

А со скриптом все сложно, парой строк там не отделаться?

[Alex1233]

Но в целом мне нравится =) Наверное даже так и оставлю, спасибо большое! =)

====

Но в целях самообучения, на будущее, хотелось бы все таки понять как решать подобные проблемы которые изложены в 1 посте.

[рони]

Но в целях самообучения, на будущее, хотелось бы все таки понять как решать подобные проблемы которые изложены в 1 посте.

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

[Alex1233]

рони, Вы про эти функции?

setTimeout

и

clearTimeout

Если да, то я смотрю у Вас там как раз сделано как и в примере из моего 1 поста, что я давал (где все работает четко и как положено). Тут.

К сожалению я как не пытался вникнуть в тот код так и не понял как это все работает. Слишком как то все заумно. Но Ваш пример вроде как поменьше/попроще - попробую сейчас его разложить по полочкам, что там и к чему.

[Alex1233]

рони, все равно тяжеловато это. Вы не могли бы на моем коде добавить эти функции? Я думаю что я за несколько дней его уже на столько изучил что мне Ваши правки в нем будут куда понятнее.

Был бы Вам очень и очень признателен за это.

[Alex1233]

$('.mDem').stop();

Вот это там кстати лишнее, это я эксперементировал - забыл убрать.

[рони]

Alex1233,

$(document).ready(function () {
    var timer;
    $("#list_wrap").on("mouseenter", ".list_box", function () {
        clearTimeout(timer)
       var $dem = $(this).find('img');
        $dem.stop();
        var $startWidth = $dem.width();
        var $startHeight = $dem.height();
        var $origWidth = $dem.attr('width');
        var $origHeight = $dem.attr('orh');
        $origWidth < $startWidth && ($origWidth = $startWidth * 1.2);
        $origHeight < $startHeight && ($origHeight = $startHeight * 1.2);
        $sdvigLeft = (($origWidth - $startWidth) / 2) * (-1);
        $sdvigTop = (($origHeight - $startHeight) / 2) * (-1);
        timer = setTimeout(function () {
            $dem.animate({
                'marginLeft': $sdvigLeft + 'px',
                'marginTop': $sdvigTop + 'px',
                'width': $origWidth + 'px',
                'position': 'absolute',
                'maxWidth': '900px'
            }, 100);
        }, 500);
    }).on('mouseleave', '.list_box', function () {
        clearTimeout(timer)
        $(this).find('img').stop().css({
            'marginLeft': '0',
            'marginTop': '0',
            'width': '310px',
            'position': 'absolute',
            'maxWidth': '100%'
        });
    });
});