0



アニメーションを適用しようとしているボタンに問題があります。

私が作成しようとしている効果は、白い境界線と透明な背景を持つボタンが、左から右にホバーすると白い背景色で塗りつぶされ、ユーザーのマウスが消えると左から右に再びクリアされることです。font-color も読みやすい色に変わります。

これを実現するために、2 つの a が重なっている div があります。なぜ2つの要素？したがって、ユーザーは一番上/表示されている方をクリックできます。

HTML:

<div class="block-button"> <a href="#" class="first">Click me</a>
<a href="#" class="second"></a>

CSS

.block-button .first {
z-index: 8;
color: #fff;
}

.block-button .second {
z-index: 7;
background-color: white;

}

jQuery

 //Buttons
$("a.second").hide();
$(".block-button").each(function () {
    $(this).hover(function (e) {
        $(this).find("a.second").show("blind", {
            direction: "left",
            easing: 'easeOutCubic'
        },500, function () {
           //Callback
        });
    }, function (e) {
        $(this).find("a.second").hide("blind", {
            direction: "right",
            easing: 'easeOutCubic'
        }, 500, function () {
            //Callback
        });
    });
});

ただし、ブラインドアニメーションのキューイングを処理するのに問題があります。通常、私はこれを jQuery.stop() で解決しますが、現時点では正しく機能しません。

停止を無効にすると、自然にすべてのアニメーションがスタックされるため、継続的にホバリング/ホバリング解除するとアニメーションが何度も繰り返されます。

ただし、停止を有効にすると、まだアニメーション化されている間に要素を再度入力すると (アニメーション関数で長い期間を使用すると、これがはっきりとわかります)、最後のアニメーションが正しく呼び出されません。

説明するのはちょっと難しいですが、これらのjFiddlesはこれらをかなり明確にしていると思います。

停止有効: jsFiddle ここ

停止無効: jsFiddle ここ

どんな助けでも大歓迎です！

4

2 に答える 2

0

あなたは自分自身にそれをあまりにも難しくしています。2 つの要素を重ねるだけです。背景と前景。背景のサイズを変更することで、ボタンをアニメーション化できます。

まるごと書き直しました。私のフィドルをチェックしてください。

を使用position: absolute;しposition: relative;て、両方の要素を重ねました。異なるテキストで複数のボタンを使用する場合に備えて、動的な幅は保持されます。

メソッドでwidthオンホバーを変更しているので、ちゃんと動いているようです。animate()stop()

于 2013-02-19T14:06:07.217 に答える
0

ティムが彼の回答で提案した手法を使用して、必要な効果を達成しました。バックグラウンド スパンの幅をアニメーション化するとうまくいくようです。

Javascript:

$('a.btn-pretty').hover(function(e) {
$(this).children('span.background').stop().animate({
    'width': $(this).width()
}, 300,function(){
    $('span.background').css({'right':'0','left':'auto'});   
});
}, function(e) {
$(this).children('span.background').stop().animate({
    'width': 0
}, 300,function(){
     $('span.background').css({'left':'0','right':'auto'}); 
});
});

ここでjsFiddleを見ることができます

于 2013-02-19T14:52:47.577 に答える