1

このウェブサイトでは、これで作成された「黒の不透明度」フィルターを使用しています。

    /* Body black hover */
    $(document).ready(function() {
        $("#bg_hover").stop();
        $("#bg_hover").animate({ opacity: 0.5 }, 1000);
        $("body").hover(function() {
            $("#bg_hover").stop();
            $("#bg_hover").animate({ opacity: 0.5 }, 1000);
        }, function( ) {
            $("#bg_hover").stop();
            $("#bg_hover").animate({ opacity: 0 }, 1000);
        });
    });

私が抱えている問題は、ユーザーが「SOBRE NOSALTRES」に入ったときに少しアニメーションを作りたかったことです（上部のメニューをクリックしてページに入ります）。

ご覧のとおり、「うまく」アニメーション化されますが、まったくアニメーション化されません。「PRODUCTES」に移動して「SOBRE NOSALTRES」に戻ると、アニメーションが 98% の幅で動かなくなることがあります。なんか変だな、なんでこうなるの？

これはエラーのスクリーンショットです: http://webkunst.comeze.com/test/3.png

これは、NOSALTRES ページでアニメーションを作成するために使用しているスクリプトです。

    <script>
        $(document).ready(function() {
            $("#bg_hover").stop();
            $("#bg_hover").animate({ width: '80%', opacity: 0.9, left: '10%', right: '10%' }, 800);
            $('li#nosaltres').addClass('active')
        });
        $("body").hover(function() {
            $("#bg_hover").stop();
            $("#bg_hover").animate({ opacity: 0.9 }, 500);
        }, function( ) {
            $("#bg_hover").stop();
            $("#bg_hover").animate({ opacity: 0 }, 500);
        });
    </script>
4

2 に答える 2

1

この問題は、幅を に縮小しているアニメーションを含むすべてのアニメーションを停止する最初の行を呼び出すため、PRODUCTESページの読み込み中にホバーすると発生します。<body>$("#bg_hover").stop();$("body").hover(function() {});80%

SOBRE NOSALTRESをクリックし、マウスをブラウザ ウィンドウの内外にすばやく移動することで、問題を再現できます。

たとえば、アニメーションが完了したら呼び出す匿名関数を追加するなどして<body>、最初のサイズ変更が完了するまでホバー効果を追加しません。80%

$("#bg_hover").stop().animate({ width: '80%', opacity: 0.9, left: '10%', right: '10%' }, 800, function() {
    $('li#nosaltres').addClass('active');

    $("body").hover(function() {
        $("#bg_hover").stop().animate({ opacity: 0.9 }, 500);
    }, function( ) {
        $("#bg_hover").stop().animate({ opacity: 0 }, 500);
    });
});
于 2012-11-27T10:04:47.343 に答える
0

2 行に分割しないでください:\

$("#bg_hover").stop();
$("#bg_hover").animate({ width: '80%', opacity: 0.9, left: '10%', right: '10%' }, 800);

代わりに、次を使用します。

$("#bg_hover").stop().animate({ width: '80%', opacity: 0.9, left: '10%', right: '10%' }, 800);
于 2012-11-27T09:50:56.973 に答える