禁用悬停直到动画完成

时间:2014-08-26 19:55:49

标签: jquery jquery-animate

我的尝试,有什么建议吗?

    var animating = false,
        $header = $('#header'),
        $titles = $header.find('span'),
        $blurSlider = $('.site-blur-slider'),
        $blurCopy = $blurSlider.find('.active .copy'),
        $blurControls = $blurSlider.find('.controls');

    $header.mouseover(function() {
        if(!animating) {
            $blurSlider.stop().animate({ width : 670 });
            $blurCopy.stop().animate({left: 367});
            $blurControls.stop().animate({left: 440});
            $(this).stop().animate({width : 310}, function() {
                $titles.fadeIn(200);
                animating = true;
            });
        }

    }); 

    $header.mouseout(function() {
        $this = $(this);

        $titles.stop().fadeOut(50, function() {
            $this.animate({ width : 120 });
            $blurSlider.animate({ width : 440}, function() {
                animating = false;
            });
            $blurCopy.animate({left: 157});
            $blurControls.animate({left: 230});
        });

    }); 

这很糟糕。

2 个答案:

答案 0 :(得分:1)

您注意到您希望在用户决定再次尝试再次运行它们之前完成所有这些动画"。这需要某种阻止机制,这将阻止用户在每个动画完成之前采取进一步操作。鼠标悬停事件不是强制执行此操作的好机制。你需要的是像开关一样。

这是一对小提琴。第一个提供了问题代码的略微简化版本,以更好地说明问题:

http://jsfiddle.net/klenwell/q9s5voe3/2/

第二个小提琴重构第一个使用promises的代码和一个" switch"按钮,以更好地控制界面的状态:

http://jsfiddle.net/klenwell/q9s5voe3/

该按钮可以做几件事:

  1. 表示接口的当前状态
  2. 它阻止用户进一步操作,直到每个动画完成
  3. 这里是切换代码的​​核心:

    $switch.on('click', function() {
        if ($switch.text() == 'mouseover') {
            $switch.prop('disabled', true).text('animating...');
            var animationComplete = mouseOverAnimation();
            $.when(animationComplete).then(function() {
                $switch.prop('disabled', false).text('mouseout');
            }); 
        }
        else if ($switch.text() == 'mouseout') {
            $switch.prop('disabled', true).text('animating...');
            var animationComplete = mouseOutAnimation();
            $.when(animationComplete).then(function() {
                $switch.prop('disabled', false).text('mouseover');
            }); 
        }
        else {
            console.warn('animation in progress');
        }
    });
    

    它不能解决您的问题,但我希望它能帮助您解决问题。

答案 1 :(得分:0)

我自己修复了它,不得不在旁边的另一个对象上创建一个mouseout,以使效果顺利运行,同时我还将一个开放的类添加到将要悬停的对象上。

此处更新了代码:

    var animating = false,
        $blurSlider = $('.site-blur-slider'),
        $blurCopy = $blurSlider.find('.copy'),
        $blurControls = $blurSlider.find('.controlscontainer');

        $header.mouseover(function() {
            $(this).addClass('opened');
            if($(this).hasClass('opened') && !animating) {
                $(this).stop(true, true).animate({width : 310}, function() {
                    $titles.fadeIn(200);
                    animating = true;
                    $('#boxlogo').fadeOut('fast');
                    $('#fulllogo').fadeIn('fast');
                });
                $blurSlider.stop(true, true).animate({ width : 670 });
                $blurCopy.stop(true, true).animate({width: 600});
                $blurControls.stop(true, true).animate({width: 540});
            }



        }); 

        $('#blurslider').mouseover(function() {
            if($header.hasClass('opened')) {
                $header.removeClass('opened');
                $titles.delay(10000).fadeOut(50, function() {
                    animating = false;
                    $header.stop(true, true).animate({ width : 120 });
                    $blurSlider.stop(true, true).animate({ width : 440});
                    $blurCopy.stop(true, true).animate({width: 394});
                    $blurControls.stop(true, true).animate({width: 330});
                });
                    $('#boxlogo').fadeIn('fast');
                    $('#fulllogo').fadeOut('fast');
            }

        });