嗨，大家好我是jquery/javascript的新手。我在w3schools中發現了一些代碼，我想在我的網站中使用它。但我希望動畫在我加載頁面的時候觸發。請幫助我如何做到這一點如何設置這個jquery代碼到body中onload

<!DOCTYPE html> 
    <html> 
    <head> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
    <script> 
    $(document).ready(function(){ 
     $("button").click(function(){ 
     $("#div1").fadeToggle(); 
     $("#div2").fadeToggle("slow"); 
     $("#div3").fadeToggle(3000); 
     }); 
    }); 
    </script> 
    </head> 
    <body> 

    <p>Demonstrate fadeToggle() with different speed parameters.</p> 
    <button>Click to fade in/out boxes</button> 
    <br><br> 

    <div id="div1" style="width:80px;height:80px;background-color:red;"></div> 
    <br> 
    <div id="div2" style="width:80px;height:80px;background-color:green;"></div> 
    <br> 
    <div id="div3" style="width:80px;height:80px;background-color:blue;"></div> 

    </body> 
    </html>

我想要做這樣的事情

<body onload="myFunction()"> 

<h1>Hello World!</h1> 

<script> 
function myFunction() { 
    alert("Page is loaded"); 
} 
</script> 

</body> 
</html>

來源

2014-12-11 Nixxx

你的意思是你想觸發'fadeToggle' onload？ – roullie 2014-12-11 05:25:56

是的，我希望fadetoggle（）每次啓動/觸發我加載/刷新頁面 – Nixxx 2014-12-11 05:27:14

基於w3schools的例子，它只會動起來，當我點擊按鈕。 – Nixxx 2014-12-11 05:27:57

這是你想要的東西：

<html> 
<head> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
</head> 
<body onload="myFunction()"> 

<h1>Hello World!</h1> 

<script> 
function myFunction() { 
    $("#div1").fadeToggle(); 
    $("#div2").fadeToggle("slow"); 
    $("#div3").fadeToggle(3000); 
} 
</script> 

</body> 
</html>

來源

2014-12-11 05:26:32

是的，這是我需要的。謝謝！ – Nixxx 2014-12-11 05:29:40

而不是

的Hello World！

– Nixxx 2014-12-11 05:30:46

試試這個

$(document).ready(function(){ 

    $("#div1").fadeToggle(); 
    $("#div2").fadeToggle("slow"); 
    $("#div3").fadeToggle(3000); 

});

來源

2014-12-11 05:27:27 roullie

如果您正在接近執行該功能[R頁面載入，然後把下面JavaScript在結束你的HTML設計：

<script type="text/javascript"> 
    window.onload = myFunction(); 
</script>

並在頁面的開始定義函數，你已經做了！所以，最終的代碼變得象下面這樣：

<!DOCTYPE html> 
    <html> 
    <head> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
    <script> 
    $(document).ready(function(){ 
     $("button").click(function(){ 
     $("#div1").fadeToggle(); 
     $("#div2").fadeToggle("slow"); 
     $("#div3").fadeToggle(3000); 
     }); 
    }); 
    </script> 
    </head> 
    <body> 

    <p>Demonstrate fadeToggle() with different speed parameters.</p> 
    <button>Click to fade in/out boxes</button> 
    <br><br> 

    <div id="div1" style="width:80px;height:80px;background-color:red;"></div> 
    <br> 
    <div id="div2" style="width:80px;height:80px;background-color:green;"></div> 
    <br> 
    <div id="div3" style="width:80px;height:80px;background-color:blue;"></div> 
<script type="text/javascript"> 
    window.onload = myfunction(); 
</script> 
    </body> 
    </html>

讓我接受它知道，如果它的工作原理:)

來源

2014-12-11 05:30:04 Vikrant

我認爲最好的辦法是使用事件偵聽器。

<script type="text/javascript"> 
window.addEventListener('load',myfunction,false); 
</script>

來源

2014-12-11 05:38:41 Ved

如何設置這個jquery代碼到body中onload

回答

的Hello World！

相關問題