0

バーのバウンス効果を探しています。macでお気づきの方は、すべてのアプリが並んでいるドック。いずれかのアプリケーションをクリックした瞬間に、アイコンが跳ね始めます。私は同様の効果を探しています。バーは 3 回バウンドしてから 1 ～ 2 秒間停止し、再び 3 回バウンドする必要があります。

これが私が現在行っていることで、役に立たなかった

$(function () {
function bounceDiv(){
    $("#six").effect("bounce", { times:3, distance:20 }, 400);
}
setInterval(bounceDiv,1000);
});

事前にサンクス。

4

2 に答える 2

2

jQuery/JavaScriptを使用してFantasticBouncyEffectを試すことができます

ここに画像の説明を入力してください

私たちの目標は、4つのボックス（DIV）を持つHTMLページを作成することです。これらの各ボックスをクリックすると、特定の方向にバウンスします。jQueryのメソッドへの引数を使用して、要素のバウンスの方向と速度を制御できます。

HTML

<table>
<tr>
    <td><div id="bouncy1">Click here to bounce. Direction: Up</div></td>
    <td><div id="bouncy2">Click here to bounce. Direction: Left</div></td>
</tr>
<tr>
    <td><div id="bouncy3">Click here to bounce. Direction: Right</div></td>
    <td><div id="bouncy4">Click here to bounce. Direction: Down</div></td>
</tr>
</table>
<br/>
<input id="bounceAll" type="button" value="Click to Bounce All!"/>

CSS

div {
    padding:5px;
    width:150px;
    height:100px;
    text-align:center;
}
#bouncy1 {
    background-color:#FFEE88;
}
#bouncy2 {
    background-color:#EE88FF;
}
#bouncy3 {
    background-color:#EE8888;
}
#bouncy4 {
    background-color:#88EEFF;
}

JavaScript

$(function(){

    //Add bounce effect on Click of the DIV
    $('#bouncy1').click(function () {
          $(this).effect("bounce", { times:5 }, 300);
    });

    $('#bouncy2').click(function () {
          $(this).effect("bounce", { direction:'left', times:5 }, 300);
    });

    $('#bouncy3').click(function () {
          $(this).effect("bounce", { direction:'right', times:5 }, 300);
    });

    $('#bouncy4').click(function () {
          $(this).effect("bounce", { direction:'down', times:5 }, 300);
    });

    //Bounce all DIVs on click of button
    $("#bounceAll").click(function(){
        $("div").click();
    });
});

jQuery/JavaScriptを使用したFantasticBouncyEffectでのデモ

JavaScriptの場合

$(document).ready(function(){
    $("div").click();
});

JavaScriptで

$(function () {
    function bounceDiv(){
        $("#six").effect("bounce", { times:3, distance:20 }, 400);
    }
    setInterval('bounceDiv()', 1000);
});

あなたはsを忘れました'！:(

ソース： http： //viralpatel.net/blogs/jquery-bounce-effect-bounce-html-js/

于 2012-07-25T05:12:51.543 に答える
1

これは100％機能します

<script type="text/javascript">
function bounceDiv(){
    $("#six").effect("bounce", { times:3 }, 300);
}

$(document).ready(function() 
{
    setInterval('bounceDiv()',5000);
});
</script>

楽しみ ：）

于 2012-07-25T05:22:56.403 に答える