Jquery-如何在中间重置动画'的当前动画

Jquery - How to reset Animation in the middle of it's current animation?

本文关键字：动画 Jquery- 在中间      更新时间：2023-09-26

我正在进行我的第一个JQuery项目，我正试图弄清楚，如果用户决定用鼠标离开.contain，如何重置我的动画。现在，如果用户用鼠标离开.cantain，动画将继续进行，就好像它们仍然在.contain中一样。如果用户决定在动画中期离开容器，我希望它反向还原动画。我怎样才能做到这一点？

$( document ).ready(function() {
    $('#facial span').fadeOut(0);
    $('.container').mouseenter(function(){
        // When mouse enters the .container, #facial slides to center of .container.
        $('#facial').animate({right: '25%'})
        // After #facial slides to center it delays for 500ms.      
                    .delay(500)
        // After #facial delays it expands it's width to 100% of .container.
                    .animate({right: 0, width: '100%'});
        // show the span link at bottom as a H2 with center aligned.
        $('span').fadeIn(600);
    }); 

    $('.container').mouseleave(function(){
       // Mouse leaves .container, and span fades out slowly.
      // $('span').css('display','none'); 
       $('span').fadeOut(500);
       // Mouse leaves the .container, #facial shrinks it's width to 50%.
       // #facial slides back to right of .container.
       $('#facial').animate({right: 0, width: '50%'});
   }); 
});

这是我的演示

您可以使用jQuery的stop(true)方法来取消所有当前和排队的动画。

请参阅此更新jsFiddle

尝试使用.stop(true, true, true)

var $view = $('<a href="x">View</a>');
$( document ).ready(function() {
    $('#facial span').fadeOut(0);
    $('.container').mouseenter(function(){
        // When mouse enters the .container, #facial slides to center of .container.
        $('#facial').animate({right: '25%'})
        // After #facial slides to center it delays for 500ms.      
                    .delay(500)
        // After #facial delays it expands it's width to 100% of .container.
                    .animate({right: 0, width: '100%'});
        // show the span link at bottom as a H2 with center aligned.
        $('span').fadeIn(600);
    }); 

    $('.container').mouseleave(function(){
       // Mouse leaves .container, and span fades out slowly.
      // $('span').css('display','none'); 
       $('span').stop(true, true, true).fadeOut(500);
       // Mouse leaves the .container, #facial shrinks it's width to 50%.
       // #facial slides back to right of .container.
       $('#facial').stop(true, true, true).animate({right: 0, width: '50%'});
   }); 
});

jsfiddlehttps://jsfiddle.net/sy4pv8z3/57/

相关文章：