0

私はJSの小さな部分をセットアップしようとしていますが、物事が有効になる順序に問題があります。

画像にカーソルを合わせると、詳細ブロックがフェードアウトする必要があり、次にアイコンオプションのある2番目のブロックがフェードインします。

現在、詳細ブロックはフェードアウトし、オプションブロックはオンになっています。これは問題ありません。ただし、マウスをオフにすると、オプションがオフに切り替わる前に、詳細ブロックのフェードインが発生します。

次のことを行うにはどうすればよいですか（コンテナにカーソルを合わせる>詳細フェードアウト>オプションをオンに切り替える>マウスをオフにする>オプションをオフに切り替える>詳細をフェードインする）？

これが私の現在のjavascriptで、ほとんどそこにあります。

$j('.category-products li').hover(function(){
    var product = $j(this);

    product.children('.product-bottom-info').stop().fadeToggle(700, function(){
        if(product.find('.catalog-image-container').length){  
            //this is a multi image product
            product.find('.image-bottom-controlls').stop().toggle();
        }
    });
});
4

1 に答える 1

1

- - アップデート - -

.hover 1 パラメータのみを渡しているため、これは、li を入力して左に移動したときに発生します。ホバー 2 関数、mouseIn および mouseOut を渡すことができます。

だから試してください：

$j('.category-products li').hover(function(){
    var product = $j(this);

    product.children('.product-bottom-info').stop().fadeToggle(700, function(){
        if(product.find('.catalog-image-container').length){  
            //this is a multi image product
            product.find('.image-bottom-controlls').stop().toggle();
        }
    });
}, function() {
    var product = $j(this);

    product.children('.image-bottom-controlls').stop().fadeToggle(700, function(){
        if(product.find('.catalog-image-container').length){  
            product.find('.product-bottom-info').stop().toggle();
        }
    });
);

product.find('.image-bottom-controlls').stop().toggle();fadeToggle にコールバックを入れてみてください。このようにして、fadeToggle リスナーが終了した後に常に発生します。

参照: http://api.jquery.com/fadeToggle/

于 2013-02-25T11:37:02.547 に答える