javascript - Mac：Apple Dock 弹跳效果

Question

我正在寻找一个酒吧的弹跳效果。如果您在 mac 中注意到，所有应用程序都排成一列的 Dock。单击任何应用程序的那一刻，图标就会开始弹跳。我正在寻找类似的效果。酒吧需要反弹 3 次，然后停止一两秒钟，然后再次反弹 3 次。

这是我目前正在做的事情，但没有帮助

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

提前感谢。

Answer 1

您可以使用 jQuery/JavaScript尝试Fantastic Bouncy Effect

我们的目标是创建一个包含 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在 Fantastic Bouncy Effect 演示

对于您的 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/

Answer 2

这将工作 100%

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

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

享受 ：）