jQuery的滑动和停止问题:动画元素随着鼠标的快速移动而冻结

问题描述

这里是 Zi JsFiddle .为了复制我的问题，您必须将鼠标悬停在标有'javascript'的链接上，然后将其悬停在鼠标上，然后再将其移回.如果在动画完成之前执行此操作，粉红色的Slide #subMenu将在滑动过程中冻结.有办法防止这种情况发生吗?我已经尝试了一些.stop()，但是我真的不希望每次鼠标进入或离开.navLink时动画都重新开始.动画应从中断处开始.换句话说，如果粉红色部分处于中间位置，并且执行了slideDown()，则粉红色不会消失，然后向下滑动，应该从其所在位置向下滑动.

Here is Zi JsFiddle. In order to replicate my issue you have to hover over the link that says 'javascript', then mouseout that, then mouseback in. If you do this before the animation is complete, the pink slidedown #subMenu will freeze midway through sliding. Is there a way to prevent this from happening? I have tried some .stop()s , but i really don't want the animation to re-start every time you mouseenter or leave the .navLink . The animation should begin from where it left off. In other words, if the pink section is halfway down, and a slideDown() gets executed, the pink should not dissappear and then slide down, it should slide down from where it is.

谢谢！

JS:

 $('header#subHeader').hide();
    $('.navLink').hover(function () {
        if ($(this).children('div').length > 0) {
            var subMenu = $(this).find('.subMenu').html();
            $('header#subHeader').empty().append('<div>' + subMenu + '</div>').stop().slideDown();
        } else {
            $('header#subHeader').stop().slideUp();
        }
    });
    $('hgroup:first').on('mouseleave', function(){
        $('header#subHeader').slideUp();
    });

推荐答案

也使用stop(true, true)完成待处理的动画(跳转到最后)，以免获得中间效果.

use stop(true, true) to complete the pending animation (jumping to the end) as well so that you dont get that mid way effect.

 $('header#subHeader').hide();
    $('.navLink').hover(function () {
        if ($(this).children('div').length > 0) {
            var subMenu = $(this).find('.subMenu').html();
            $('header#subHeader').empty().append('<div>' + subMenu + '</div>').stop(true, true).slideDown();
        } else {
            $('header#subHeader').stop(true, true).slideUp();
        }
    });
    $('hgroup:first').on('mouseleave', function(){
        $('header#subHeader').slideUp();
    });

演示

Demo

clearQueue
Type: Boolean
A Boolean indicating whether to remove queued animation as well. Defaults to false.
jumpToEnd
Type: Boolean
A Boolean indicating whether to complete the current animation immediately. Defaults to false.

尝试使用animate而不是slide高度来获得所需的效果，以恢复上/下滑动动画的感觉:

Try animate instead of slide height for the desired effect to get a feel of resuming the slide up/ down animation:

var slideUpSettings = {
             height: '0px'
         };

var slideDownSettings = {
             height: '20px'
         };


 $('.navLink').hover(function () {
     var $header = $('header#subHeader');
     if ($(this).children('div').length > 0) {

         var subMenu = $(this).find('.subMenu').html();
         $header.empty().append('<div>' + subMenu + '</div>').stop().animate(slideDownSettings, 500);
     } else {

         $header.stop().animate(slideUpSettings, 500);
     }
 });
 $('#subHeader').on('mouseenter', function () {
     $(this).stop().animate(slideDownSettings, 500);
 });


 $('hgroup:first').on('mouseleave', function () {
     $('header#subHeader').stop().animate(slideUpSettings, 500);
 });

演示

Demo

这篇关于jQuery的滑动和停止问题:动画元素随着鼠标的快速移动而冻结的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！