onclick事件弹跳

http://www.lifechurch.org.uk/new-here/about/ http://www.lifechurch.org.uk/media/blog/onclick事件弹跳

林想创建一个链接效果类同这一

我发现：

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

我已经被告知它使用一个库，任何想法，我可以从此源？

感谢科斯蒂

UPDATE

我试着包装中，我想反弹

<!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的博客链接头

感谢

来源

2012-12-07 Kirsty Marks

至于你更新的代码。您只能在任何给定页面上拥有一个具有相同ID的元素。所以，如果你删除第一个“点击我”，最后一个将工作。 – fredrik

嗨弗雷德里克，好东西。基本上我只想让所有的H1班都这样做。所以我可以在CSS中编码，然后从那里做到这一点？ –

有没有办法让它反弹？喜欢网站似乎在做 –

此行添加到您的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

来源

2012-12-07 09:23:01 fredrik

嗨弗雷德里克，这是一个按钮？我希望这是一个链接像网站上的文字链接是？ –

@KirstyHarris我用示例更新了代码 – fredrik

嗨Fredrik，谢谢你。不过，我想要实际的链接反弹，而不是下面的文本？ –

此代码来重新创建效果使用JQuery（http://www.jquery.com），一个很常见的JavaScript库。

的“反弹效应”是一个可选的附加jQuery的命名JQuery用户界面的一部分，看到http://api.jqueryui.com/bounce-effect/

编辑：科斯蒂，如果您想了解关于JavaScript和JQuery，http://www.codecademy.com有一些伟大的自由互动课程对这两个主题。

来源

2012-12-07 09:20:17

嗨Gruse，感谢这些:)我会改变DIV为例如H1，如果我想点击H1头来反弹？ –

Kirsty，如果你引用Fredrik的代码/ JSFiddle：是的，只要你保留class =“target”位。试试看！另外，我鼓励您阅读关于jQuery选择器如何工作的内容，这将使您在将来更容易。 –

.effect是jQuery的UI

下载自定义分钟，JS只影响部分：

http://jqueryui.com/download/

来源

2012-12-07 09:27:56

嗯......大概要看看这个：S –

onclick事件弹跳

回答

相关问题