9

jQuery アニメーションだけを使用して、div バウンスを作成するアニメーションの解決策を見つけることができません。次のようなものは機能しません:

$("#bounce").click(function() {
    $(this).effect("bounce", {
        times: 3
    }, 300);
});.​

jQuery UI や、イージング プラグインなどの外部プラグインは使用したくありません。私の場合、ぐらつき効果は同じくらい良いので、どちらでも構いません。

ここに例があります。どんな助けでも大歓迎です! 前もって感謝します

4

5 に答える 5

26

animate次のように、要素のいくつかの呼び出しを単純に連鎖させることができます。

$("#bounce").click(function() {
    doBounce($(this), 3, '10px', 300);   
});


function doBounce(element, times, distance, speed) {
    for(var i = 0; i < times; i++) {
        element.animate({marginTop: '-='+distance}, speed)
            .animate({marginTop: '+='+distance}, speed);
    }        
}

作業例: http://jsfiddle.net/Willyham/AY5aL/

于 2012-04-28T13:14:57.913 に答える
0

垂直バウンスの場合、次のようなことを試すことができます。

function bounce(element, distance, speed){
 var bounce_margin_top = $(element).css("margin-top")
 $(element).css("margin-top", "-="+distance)

 $(element).show().fadeIn(200).animate({
    "margin-top": bounce_margin_top
 }, {
     duration: speed,
     easing:   "easeOutBounce"
 })
}
于 2012-12-31T16:55:32.323 に答える
0

私は通常、jQuery animate を使用します。特定の質問については、次のようになります。

HTML:

<div id="bounce"></div>

CSS:

#bounce {
height:50px;
width:50px;
background:#333;
margin-top:50px;
position:relative;
}

そして最後に、jQuery:

$( "#bounce" ).click(function() {
for (var i=1; i<=3; i++) {
$(this).animate({top: 30},"slow");
$(this).animate({top: 0},"slow");
     }
});

そして、ここに実用的なフィドルがあります：http://jsfiddle.net/5xz29fet/1/

于 2014-09-01T09:53:45.780 に答える