JQuery при наведении курсора мыши

Question

У меня есть следующий живой пример на http://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); 

    });
});