Question

当我应该调用鼠标“悬停”功能时，我的脚本有点问题。发生的事情是调用“悬停”功能并执行图像转换。但如果你在转换完成之前“徘徊”，则不会调用“悬停”功能。

我对JavaScript很陌生，所以如果有人能在我的脚本中发现一个很容易纠正以获得预期功能的错误，我会非常感激。

$(function () {
    var easing = 'swing';

    var transitions = ['fadeToRight', 'fadeToLeft', 'fadeToTop', 'fadeToBottom'];
    var transitionSpeed = 300;

    var $product_container = $('#product_container');
    var $product_areas = $product_container.find('.product_area');
    var $product_images = $product_container.find('img');
    var imageCount = 0;

    $product_images.each(function () {
        var $this = $(this);
        $('<img/>').load(function () {
            ++imageCount;
            if (imageCount == $product_images.length) {
                $product_areas.each(function () {
                    $(this).hover(
                        function () {
                            var $currImage = $(this).find('img');

                            var transition = transitions[Math.floor(Math.random() * transitions.length)];

                            switch (transition) {
                                case 'fadeToRight':
                                    $currImage.animate(
                                        {
                                            'left': $currImage.width() + 'px',
                                            'opacity': '0'
                                        },
                                        transitionSpeed,
                                        easing,
                                        function () {
                                            $currImage.hide().css(
                                                {
                                                    'z-index': '1',
                                                    'left': '0px',
                                                    'opacity': '1'
                                                });
                                        });
                                    break;

                                case 'fadeToLeft':
                                    $currImage.animate(
                                        {
                                            'left': -$currImage.width() + 'px',
                                            'opacity': '0'
                                        },
                                        transitionSpeed,
                                        easing,
                                        function () {
                                            $currImage.hide().css(
                                                {
                                                    'z-index': '1',
                                                    'left': '0px',
                                                    'opacity': '1'
                                                });
                                        });
                                    break;

                                case 'fadeToTop':
                                    $currImage.animate(
                                        {
                                            'top': -$currImage.height() + 'px',
                                            'opacity': '0'
                                        },
                                        transitionSpeed,
                                        easing,
                                        function () {
                                            $currImage.hide().css(
                                                {
                                                    'z-index': '1',
                                                    'top': '0px',
                                                    'opacity': '1'
                                                });
                                        });
                                    break;

                                case 'fadeToBottom':
                                    $currImage.animate(
                                        {
                                            'top': $currImage.height() + 'px',
                                            'opacity': '0'
                                        },
                                        transitionSpeed,
                                        easing,
                                        function () {
                                            $currImage.hide().css(
                                                {
                                                    'z-index': '1',
                                                    'top': '0px',
                                                    'opacity': '1'
                                                });
                                        });
                                    break;

                                default:
                                    $currImage.animate(
                                        {
                                            'left': -$currImage.width() + 'px'
                                        },
                                        transitionSpeed,
                                        easing,
                                        function () {
                                            $currImage.hide().css(
                                                {
                                                    'z-index': '1',
                                                    'left': '0px'
                                                });
                                        });
                                    break;
                            }
                        },
                        function () {
                            var $currImage = $(this).find('img');
                            $currImage.show();
                        });
                });
            }
        }).attr('src', $this.attr('src'));
    });
});

我还想说，如果完成转换，则会调用“hover out”函数，然后将鼠标从容器中移出图像。当你不再徘徊时，它不会自动转到另一个功能，这似乎很奇怪。

Answer 1

这很可能不是你的mouseout函数没有被调用的问题（实际上它就像你在动画完成时所观察到的那样被调用）但你的动画搞乱了你的计划。在离开元素后继续它只是覆盖你在mouseout函数中声明的规则。

在mouseout函数中添加stop()以停止正在运行的动画，然后继续：

      function () {
          var $currImage = $(this).find('img');
          $currImage.stop().show();
      });

Answer 2

您可以使用stop（）取消所有早期动画：

$currImage.stop().animate({some animation})

这是我的一个片段：

$("div").hover(function ()
{
    $(this).stop().animate({opacity: 1}, 400);
},
function () {
    $(this).stop().animate({opacity: 0}, 400);
});

小提琴： http://jsfiddle.net/edGas/

jQuery悬停功能似乎没有按预期工作

2 个答案: