jquery反彈動畫功能在文檔加載上工作

我在html文檔中有一個圖像，當網頁加載時我希望圖像反彈。我有一個jquery函數，只有當圖像被點擊時纔會這樣做。我無法弄清楚如何使這項工作的onLoad ...jquery反彈動畫功能在文檔加載上工作

下面是代碼

<!DOCTYPE html> 
<html> 
<head> 
    <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script> 
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script> 
    <style type="text/css"> 
    div { margin-left: 500px; margin-top: 200px; width: 100px; height: 80px; position: relative; } 
</style> 

    <script> 
    $(document).ready(function() { 

$("#logo").click(function() { 
     $(this).effect("bounce", { times:4, distance:200 }, 400); 
}); 

    }); 
    </script> 
</head> 
<body> 
<div id="logo"><img src="http://visionhelp.files.wordpress.com/2012/01/soccer-ball.jpg"/> </div> 
</body> 
</html>

感謝您檢查了這一點。非常感激！ :)

來源

2012-01-27 user1163073

$(document).ready(function() { 
    $("#logo").effect("bounce", { times:4, distance:200 }, 400); 
});

，或者使用文檔準備功能的更現代的風格：

$(function() { 
    $("#logo").effect("bounce", { times:4, distance:200 }, 400); 
});

來源

2012-01-27 22:02:56

謝謝你們的幫助！ – user1163073 2012-01-27 22:04:34

doc.ready不能確保圖像已加載。 – j08691 2012-01-27 22:07:17

只是觸發頁面加載click事件。試試這個

$(document).ready(function() { 

    $("#logo").click(function() { 
     $(this).effect("bounce", { times:4, distance:200 }, 400); 
    }) 
    .click();//Will trigger the click event on page load 
});

如果你不想上標識點擊此效果，但只是在頁面加載，然後用這個。

$(document).ready(function() { 
    $(this).effect("bounce", { times:4, distance:200 }, 400); 
});

來源

2012-01-27 22:03:43 ShankarSangoli

在你的第二個例子中，我認爲你需要從'#logo'而不是'this'開始，因爲這將適用於整個文檔，而不是僅限於帶有id =徽標的對象。 – 2014-01-10 22:27:54

這對你的工作：

$(window).load(function() { 
    $('#logo').effect("bounce", { 
     times: 4, 
     distance: 200 
    }, 400).click(function() { 
     $(this).effect("bounce", { 
      times: 4, 
      distance: 200 
     }, 400); 
    }); 
})

隨着jsFiddle例如

來源

2012-01-27 22:06:33 j08691

您可以通過在頁面加載時只保留點擊處理程序並執行點擊處理程序來保持效果邏輯來減少代碼。 – ShankarSangoli 2012-01-27 22:08:16

jquery反彈動畫功能在文檔加載上工作

回答

相關問題