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()して、実行中のアニメーションを停止し、後で続行します。

      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 に答える