3

いくつかの画像を「バウンス」させようとしています。

http://jsfiddle.net/d7UjD/43/

$('#bbb').mouseenter(function() {
    $(this).stop().effect('bounce',500);
});
$('#bbb').mouseleave(function() {
    $(this).stop(true,true);
});
$('#target').mouseenter(function() {
    $(this).stop().effect('bounce',500);
});
$('#target').mouseleave(function() {
    $(this).stop(true,true);
});
$('#sears').mouseenter(function() {
    $(this).stop().effect('bounce',500);
});
$('#sears').mouseleave(function() {
    $(this).stop(true,true);
});

<div id="RegStores">
    <a href="http://www.bedbathandbeyond.com/regGiftRegistry.asp?wrn=-1824276933&amp;" target="_new"><img src="http://www.dkg2012.com/img/bbb.png" id="bbb" width="144" height="48" border="0" /></a>
    <a href="http://www.target.com/RegistryGiftGiverCmd?isPreview=false&amp;status=completePageLink&amp;listId=HCoY5fRCrcOOxRCdNn3i6g&amp;registryType=WD&amp;isAjax=false" target="_new"><img src="http://www.dkg2012.com/img/target.png" id="target" width="143" height="34" border="0" style="padding-left: 10px; padding-bottom: 5px;" /></a>
    <a href="http://www.sears.com/shc/s/GRManageView?storeId=10153&amp;catalogId=12605&amp;langId=&amp;externalId=900040792636010101&amp;grUserType=BUYER&amp;fwdURL=GRGuestRegistryView&amp;sortType=category" target="_new"><img src="http://www.dkg2012.com/img/sears.png" width="142" height="40" border="0" id="sears" style="padding-left: 10px;" /></a>
</div>

#RegStores {
    position:absolute;
    bottom:10px;
    left:23px;
    width:467px;
    height:50px;
    z-index:30;
}

他の画像を下に移動させずにこれを機能させるにはどうすればよいですか。また、画像の上にマウスをすばやく移動すると、画像が上下に動き続けます - どうすれば修正できますか?

4

3 に答える 3

4

私のコメントで私が意味したのは、アニメーションがそれを行っている（つまり、追加しているdisplay: block）ということでした..実際には、それ自体でそれを追加するのではなく、アニメーション化するアイテムをdivでラップします。.ui-effects-wrap { display: inline-block; }これを修正するために追加できます：

http://jsfiddle.net/d7UjD/46/

ただし、これはそれをサポートするブラウザーでのみ機能するため、代わりにフロートを使用する必要がある場合があります。また、そのクラスを使用する他のエフェクトに影響を与えないように、より具体的なルールを使用する必要があります (たとえば、すべてを独自の div にラップするなど)。理想的には、jQuery にもラッパー クラスを変更する方法が必要です。そうじゃないなんて想像もつかない..

編集:マルチパートの質問のすべての部分に答えていないことでGood Guy Gregに非難された後、ここで更新を作成しました:

http://jsfiddle.net/d7UjD/47/

これにより、画像が既にアニメーション化されているときにホバー時にアニメーション化されなくなります。個人的には、これが最も望ましいのですが、マウス アウト (私には意味がありません) またはマウス オーバーでアニメーションを停止したい場合は、別のことを行う必要があります。

于 2012-05-15T18:20:05.680 に答える
3

これは主にそれをトップに追いやる能力を修正するものです。これを行うには、tiをアニメーション化してマウスアウトの開始位置に戻します。他にもいくつかの改善を行いました。hover特に、リンクごとに個別のイベントバインダーを使用する代わりに、リンクごとにクラスを切り替えて適用します。

http://jsfiddle.net/EcN2h/2/

$('.bounce').hover(function() {
    $('img', this).stop(true, true).effect('bounce', 500);
}, function() {
    $('img', this).stop(true, true) );
});
​

</ p>

于 2012-05-15T18:37:07.813 に答える
1

これは提案です。コメントでは見栄えが悪いので、ここに入れます

$('#bbb,#target,#sears').mouseenter(function() {
    $(this).stop().effect('bounce',500);
});
$('#bbb,#target,#sears').mouseleave(function() {
    $(this).stop(true,true);
});

このようにコードを短くすることができます。

于 2012-05-15T18:25:24.107 に答える