回答
你可以使用JavaScript
$(function(){
$(".btn").bind("click",function(){
$(this).animate({'left': '100px'}, 100, function(){
window.location.href = index.html
})
})
})
但是,你必須停止默認的動作,如果你的按鈕是一個鏈接。
您需要捕獲單擊事件,防止默認操作,執行動畫,然後加載新頁面。
如果使用jQuery(可作爲a jsfiddle):
$('a').click(function (event) {
event.preventDefault();
$(this).animate({
//whatever
}, function() {
location.href = $(this).attr("href");
});
});
更新:Here's the new的jsfiddle是佔在評論中提到的情況,去那裏更新的代碼。訣竅是查找ctrl或命令的按鍵,如果按下任一鍵,則中止新定義的動畫點擊處理程序。
注意:在jsfiddle中,窗口需要焦點才能檢測到按鍵,這意味着框架需要焦點才能工作。
感謝您的回覆,但我不認爲這符合要求#2。如果用戶打開鏈接的上下文菜單並選擇「在新窗口中打開」,則鏈接在新窗口中打開而不播放動畫,這是應該的。但是,如果用戶按住CRTL/CMD並單擊鏈接,則您提出的方法將播放動畫並在同一窗口中打開鏈接。 – 2012-02-22 22:21:53
我更新了jsfiddle,它應該處理你現在提到的情況。我在Mac上,所以我不能測試「CTRL」,但它應該工作(它與命令)。 – 2012-02-23 14:24:58
- 1. 如何在離開當前頁面之前加載鏈接的頁面
- 2. 如何避免在鏈接點擊時離開Rails頁面?
- 3. 如何使用jQuery爲文本鏈接設置動畫效果?
- 4. 嘗試在用戶點擊時爲其設置動畫效果。
- 5. 網頁設計:線條效果與塊顯示風格動畫鏈接點擊
- 6. 如何設置動畫效果:使用jQuery選擇器之前
- 7. 在僞類之前/之前爲CSS轉換屬性設置動畫效果
- 8. 在啓用再次點擊之前製作動畫效果
- 9. 如何在離子中給頁面動畫效果?
- 10. 重定向到其他頁面如果點擊離開頁面
- 11. 動畫之前離開該頁面的JQuery
- 12. 如何使用jQuery的.live()在加載後爲頁面設置動畫效果
- 13. jQuery Mobile如何在向後導航時爲頁面設置動畫效果?
- 14. 設置當前頁面鏈接位置?
- 15. A HREF的onClick被稱爲頁面上啓動(點擊鏈接)之前
- 16. 設置鏈接後jquery動畫無效
- 17. 如果在jQuery中點擊動畫,則動畫效果
- 18. 如何在「使用CSS或jQuery之後」設置動畫效果
- 19. 如何在jQuery動畫開始之前設置等待時間?
- 20. 刷新頁面鏈接自動點擊
- 21. Angular 2 - 如果觸摸頁面,則在離開頁面之前提醒用戶
- 22. CSS3動畫鏈接點擊,而不是頁面加載
- 23. 如何在地圖上的兩點之間設置動畫效果?
- 24. 如何在離開頁面之前向websocket發送斷開連接消息
- 25. 設置變量,如果鏈接被點擊爲PHP
- 26. 如何在用戶點擊鏈接前轉到其他頁面之前滾動到頂部?
- 27. 如何從鏈接點擊頁面時自動滾動
- 28. 爲此徽標設置動畫效果
- 29. 如何點擊超鏈接打開打印預覽頁面?
- 30. 點擊鏈接,將HREF設置爲cookie
我不確定第二部分 – 2012-02-22 21:57:50
沒有按鈕,只是鏈接。在鏈接的點擊事件中播放動畫並不是一個真正的選擇,因爲點擊事件不知道我是在同一個窗口(動畫應該播放)還是在新窗口中打開鏈接(動畫不應該播放) 。 – 2012-02-22 21:59:02
您需要'返回false'或在click事件中調用'preventDefault'。 – jcubic 2012-02-22 22:03:47