0

私はいくつかの jQuery を作成しました。これは、次のことを行う必要がありますdiv。

できたのですが、マウスアウトになるとスムーズに動きません。

これが私のフィドルです：http://jsfiddle.net/AufTr/

これが私のコードです：

$(document).ready(function() {
    $(".button").hover(function() {
        $(this).find(".le").css("display", "block");
        $(this).find('.h1').animate({
            left: '-300px',
            top: '130px'
        }, {
            queue: false,
            duration: 500
        });
        $(this).find('.h2').animate({
            left: '80px'
        }, {
            queue: false,
            duration: 500
        });
        $(this).find('.h3').animate({
            top: '130px'
        }, {
            queue: false,
            duration: 500
        });
    },
    function() {
        $(this).find('.h2').animate({
            left: '0px'
        }, {
            queue: false,
            duration: 500
        });
        $(this).find('.h3').animate({
            top: '0px'
        }, {
            queue: false,
            duration: 500
        });
        $(this).find(".h1").animate({
            left: '0px',
            top: '0'
        }, "normal", function() {
            setTimeout(function() {
                $('.le').fadeOut('fast');
            }, 0, {
                queue: false,
                duration: 500
            });
        });
    });
});​

HTML

<div style="background:#98bf21;height:200px;width:200px; margin:0 auto;" class="button">
<div class="h1 le" style="background:#CCCCCC; display:none; position:relative">
<img src="http://b.vimeocdn.com/ps/797/797108_300.jpg" width="300" height="300" border="0" alt="" /></div>
<div class="h2 le" style="background:#FF0000; display:none; position:relative">Responsive</div>
<div class="h3 le" style="background:#00FF00; display:none; position:relative">View</div>

</p>

4

1 に答える 1

0

.buttonこれは、背景色-緑-と画像の背景色-白-のコントラストによって引き起こされる視覚効果のようです。

ブラウザはアニメーションレンダリングエンジンではないことを考慮に入れてください。FirefoxはChromeよりもさらに低速です。そのため、Chromeでアニメーションをスムーズに実行できるようになったとしても、他のブラウザや低速のマシンではスムーズに実行されることが保証されていません。

どうぞ、を白に変えてみて.buttonくださいbackground-color。アニメーションがよりスムーズに見えることに気付くでしょう。

私はあなたのコードをフォークしました。私のコードは基本的に、元の位置に戻されている間、笑顔のdivをフェードアウトします。私は目に滑らかに見えます。しかし、そのような効果があなたが望むものであるかどうかはわかりません。

リンク：jsFiddleの私のフォーク。

PD.:クラスのpointer-events: none;CSSルールを追加しました。.leこのルールは、アニメーション化された要素がマウスポインターの下を通過するときに、アニメーション化を中止することを回避します。

于 2012-06-15T20:03:43.373 に答える