1

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

我对 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'));
    });
});

我还想说，如果过渡完成，然后您将鼠标移出图像容器，则确实会调用“悬停”功能。当您不再悬停时，它不会自动转到其他功能，这似乎真的很奇怪。

4

2 回答 2

1

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

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

      function () {
          var $currImage = $(this).find('img');
          $currImage.stop().show();
      });
于 2012-07-17T15:02:54.110 回答
0

您可以使用 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/

于 2012-07-17T14:59:37.980 回答