jQuery hover mouseover/mouseout timing

Question

У меня есть следующий живой пример в freakyleaf.co.uk/hoverfade/, который при наведении на плитку фоновое изображение плитки исчезает от 1 до 0,25 непрозрачности более 600 мс (.tile_img), затем текст исчезает от 0 до 1 непрозрачности 500 мс (.overlay). На выводе происходит обратное.

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

У меня есть следующий код:

$(document).ready(function(){ 
$(".tile").hoverIntent(function() { 

$(".tile_img", this).animate({"opacity": "0.25"}, 600, 
function() { $(this).next(".overlay").animate({"opacity": "1"}, 500); } 
    ); 
}, 
function() { 
$(".overlay", this).animate({"opacity": "0"}, 500, 
function() { $(this).prev(".tile_img").animate({"opacity": "1"}, 600); } 
    ); 
}); 
}); 

И HTML:

<div class="wrapper"> 
    <ul id="service_boxes"> 
    <li id="sb_recording" class="tile" onClick="location.href='recording.php';" style="cursor: pointer;"> 
     <h2><a href="recording.php">Recording</a></h2> 
     <div class="tile_img"></div> 
     <div class="overlay"><p>Vintage analogue warmth and cutting-edge digital technology working in perfect harmony - That's the SoundARC sound!</p></div> 
    </li> 
    </ul> 
</div> 

Я понимаю, что, возможно, следует использовать функцию .stop но так попробовал его в нескольких местах, но только сломал код до сих пор.

Я даже не уверен, что то, что у меня есть, - лучший способ добиться того, чего я хочу; Я только дошел до этого только случайно, потому что я полный новичок.

Любая помощь была бы принята с благодарностью.

Большое спасибо.

Answer 1

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

$(document).ready(function(){ 
    $(".tile").hoverIntent(function() { 
    $(".tile_img", this).animate({"opacity": "0.25"}, 600, function() { 
     $(this).next(".overlay").animate({"opacity": "1"}, 500); 
    }); 
    }, function() { 
    var self = this; 
    var inter = setInterval(function(){ 
     if(!$(".overlay", self).is(':animated') && !$(".overlay", self).prev(".tile_img").is(':animated')){ 
     clearInterval(inter); 
     $(".overlay", self).animate({"opacity": "0"}, 500, function() { 
      $(this).prev(".tile_img").animate({"opacity": "1"}, 600); 
     }); 
     } 
    },100); 
    }); 
}); 

Answer 2

Попробуйте это, остановив анимацию с использованием метода stop и передав 2 аргумента (false, true), соответствующие и jumpToEmd.

$(document).ready(function(){ 
$(".tile").hoverIntent(function() { 

$(".tile_img", this).stop(false, true).animate({"opacity": "0.25"}, 600, 
function() { $(this).next(".overlay").animate({"opacity": "1"}, 500); } 
    ); 
}, 
function() { 
$(".overlay", this).stop(false, true).animate({"opacity": "0"}, 500, 
function() { $(this).prev(".tile_img").animate({"opacity": "1"}, 600); } 
    ); 
}); 
}); 

Answer 3

Основная проблема, которую я мог видеть, что обратный вызов для запуска второй половины анимации означал, что если вы попытались реализовать и .stop() функциональность, она не будет работать до тех пор, пока анимация не завершится. Это я считаю, что вызывает проблемы, что я, кажется, работает; хотя у него все еще есть некоторые проблемы, проблема исчезла.

Я сбросил использование hoverIntent, поскольку я не видел необходимости в этом, извинения, если я пропустил точку. Я также считаю, что зависание немного ненадежно, поэтому я предпочитаю устанавливать и выключать состояния по-разному. Я также поменял анимацию на функцию fadeTo (делает то же самое, но немного более аккуратно, чтобы читать), и выбрал некоторый dequeue(), хотя это в основном по привычке. Некоторые могут утверждать, что это бессмысленно, но в какой-то момент это стало хорошей практикой для меня.

$(".tile").mouseenter(function() { 

    $(".overlay", this).stop(false,true) 
    $(".tile_img", this).dequeue().fadeTo(600, 0.25,function(){ 

     $(this).parent().find(".overlay").dequeue().fadeTo(500,1); 

    }) 

}); 

$(".tile").mouseleave(function(){ 

    $(".tile_img", this).stop(false,true) 
    $(".overlay", this).dequeue().fadeTo(500,0,function() { 

     $(this).parent().find(".tile_img").dequeue().fadeTo(500,1); 

    }); 
});