Question

http://www.lifechurch.org.uk/new-here/about/ http://www.lifechurch.org.uk/media/blog/

我想创建一个与此类似的链接效果

我发现了以下内容：

$(document).ready(function() {
$("#button").click(function(){
$(".target").effect( "bounce", 
{times:3}, 300 );
});
});

我被告知它使用了一个库，我知道从哪里可以找到它？

由于科斯蒂

的更新 的

我尝试将该链接包装在我要反弹的类中

<!doctype html>
<html>
<head><title>jQuery example</title></head>
<body>
<a href="#" id="button">Click me</a>
<div class="target">I will bounce</div>
<div class="target">I will bounce too, since I have the same class name</div>
<br>
<br>
<br>
<a href="#" id="button"><div class="target">Click me</div></a>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>
<script>
    $(document).ready(function() {
            // Notice the .on instead of .click, it's the new style for events
            // in jQuery and the e argument
            $("#button").on('click', function (e) {
                e.preventDefault();
                $(".target").effect( "bounce", { times : 3 }, 300);
            });
        });
    </script>
</body>

它是否相互矛盾？我不确定你是否已经看到了我希望重现的上述例子。但链接的H1标题稍微“弹跳”或缩进，这是我希望在Wordpress博客链接标题上重新创建的效果

感谢

Answer 1

此代码使用的是JQuery（http://www.jquery.com），这是一个非常常见的JavaScript库。

“bounce”效果是JQuery UI的可选附加组件的一部分，请参阅http://api.jqueryui.com/bounce-effect/

编辑：Kirsty，如果你想了解JavaScript和JQuery，http://www.codecademy.com有两个很棒的免费互动课程。

Answer 2

将此行添加到HTML文档中:(在其他脚本之前）

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>

然后：

$(document).ready(function() {
    // Notice the .on instead of .click, it's the new style for events
    // in jQuery and the e argument
    $("#button").on('click', function (e) {
        e.preventDefault();
        $(".target").effect( "bounce", { times : 3 }, 300);
    });
});

一些示例HTML：

 <a href="#" id="button" class="target">Click me</a>

这里有一个jsFiddle，可以看到它的实际效果：http://jsfiddle.net/fredrik/g8J3y/ ..fredrik

Answer 3

.effect是jquery-ui的一部分

下载只有效果的自定义min-js：

http://jqueryui.com/download/

Onclick事件反弹

3 个答案: