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事件彈跳

回答

相關問題