JQuery наведите курсор мыши / тайм-аут

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), соответствующих clearQueue и 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); 

    });
});