jquery：頁面加載時的函數調用

Question

我有一個複雜的函數叫做animated()。現在這個函數必須影響2個不同的DOM元素：一個是頁面加載時，另一個是點擊它時。

$("li div").click(animated); 

我怎樣才能使它在另一個<div>在任何情況下開始發生？

喜歡的東西：

$("li div").animated(); 

我知道這是不對的，所以我怎麼能這樣做呢？

---

謝謝你的答案....任何辦法，我用jQuery非常新，所以我在這裏我會複製我的代碼，所以你要跟有關於正在發生的事情的想法...此代碼作品完美但卻是多餘的，我相信有一種方法可以減少它。

這裏是jQuery代碼

$(document).ready(function() { 

var wrapperheightanim = $(window).height(); // check the dimension of the window to see how many rectangles i can fit 
var locid = window.location.hash.replace("!", ""); // save the location id in case the user starts from a page that is not the home 

$(window).resize(function() { 
    wrapperheightanim = $(window).height(); 
}); 

//rollover 

$("li").hover(
    function() { 
    $("img", this).fadeIn(500); 
    }, 
    function() { 
    $("img", this).fadeOut(500); 
    } 
); 

//click on the navbar 


    function animated() { 

    var titletemp = $(this).attr("id"); // save the id in a temp var 
    var title=titletemp.replace(/_/g, ' '); // I use the id as titles so i substitute underscores with spaces 
    var color = $(this).css("background-color"); // save the bgcolor of the main square 

    // animation that bring every square to the start position 
    $("#about").animate({top:'200px', left:"0", height: "180px", width:"200px"}, 1000, "easeInOutBack"); 
    $("#social_media").animate({top:'90px', left:"200px", height: "140px", width:"200px"}, 1000, "easeInOutBack"); 
    $("#bd_package").animate({top:'90px', left:"400px", height: "140px", width:"200px"}, 1000, "easeInOutBack"); 
    $("#services").animate({top:'230px', left:"200px", height: "130px", width:"560px"}, 1000, "easeInOutBack"); 
    $("#portfolio").animate({top:'360px', left:"200px", height: "350px", width:"200px"}, 1000, "easeInOutBack"); 
    $("#clients").animate({top:'360px', left:"400px", height: "220px", width:"200px"}, 1000, "easeInOutBack"); 
    $("#contact").animate({top:'290px', left:"600px", height: "160px", width:"220px"}, 1000, "easeInOutBack"); 
    $("#quote").animate({top:'230px', left:"760px", height: "60px", width:"60px"}, 1000, "easeInOutBack"); 
    $("#blog").animate({top:'280px', left:"840px", height: "60px", width:"60px"}, 1000, "easeInOutBack"); 
    $(".shape").animate({top:'200px', left:"200px", height: "0", width:"0"}, 1000, "easeInOutBack"); 

    // remove the images from the rollover 
    $("img", "li").fadeIn(1); 
    $("img", this).fadeOut(1); 

    // create the main container 
    $(this).css("z-index", 99); 
    $(this).animate({ 
     top: '50px', 
     left: '150px', 
     width: '700px', 
     height: '585px' 
     }, 500 
    ); 

    // create the side navbar squares 
    $("li").not(this).css("z-index", 3); 
    $("li").not(this).animate({ 
     left: '10px', 
     width: '140px', 
     height: '60px' 
     }, 500 
    ); 

    // move the squares to create the side navbar 
    $("li").not(this).eq(0).animate({top:'50px'}, 1000, "easeOutExpo"); 
    $("li").not(this).eq(1).animate({top:'125px'}, 1000, "easeOutExpo"); 
    $("li").not(this).eq(2).animate({top:'200px'}, 1000, "easeOutExpo"); 
    $("li").not(this).eq(3).animate({top:'275px'}, 1000, "easeOutExpo"); 
    $("li").not(this).eq(4).animate({top:'350px'}, 1000, "easeOutExpo"); 
    $("li").not(this).eq(5).animate({top:'425px'}, 1000, "easeOutExpo"); 
    $("li").not(this).eq(6).animate({top:'500px'}, 1000, "easeOutExpo"); 
    $("li").not(this).eq(7).animate({top:'575px'}, 1000, "easeOutExpo"); 
    $("li").not(this).eq(8).animate({top:'650px'}, 1000, "easeOutExpo"); 
    $("li").not(this).eq(9).animate({top:'725px'}, 1000, "easeOutExpo"); 

    // animate the additional square around the main one 

    $("#title").delay(1000).queue(function(n) {  // the title square gets the same color of the main container, an gets the the title from the class 
     $(this).html("<h1>" + title + "</h1>");  // the function queue allows me to delay the process of changing title when i click 
     n(); 
    }).animate({ 
        top: '-40px', 
        left: '400px', 
        width: '450px', 
        height: '70px', 
        backgroundColor: color 
        }, 1000); 
    $("#2").css("background-color", "#9090AF").delay(1400).animate({ 
        top: '50px', 
        left: '870px', 
        width: '150px', 
        height: '70px' 
        }, 500); 
    $("#3").css("background-color", "#47477A").delay(800).animate({ 
        top: '655px', 
        left: '270px', 
        width: '750px', 
        height: '70px' 
        }, 1000); 
    $("#4").css("background-color", "#A5264E").delay(700).animate({ 
        top: '450px', 
        left: '870px', 
        width: '120px', 
        height: '70px' 
        }, 456); 
    if(wrapperheightanim > 1000){ 
    $("#5").css("background-color", "#fff").delay(1000).animate({ 
        top: '745px', 
        left: '270px', 
        width: '250px', 
        height: '70px' 
        }, 1000); 
    } 
    locid = window.location.hash.replace("!", ""); 
    } 




    function animated2() { 

    var titletemp2 = $(locid).attr("id"); // save the id in a temp var 
    var title2=titletemp2.replace(/_/g, ' '); // I use the id as titles so i substitute underscores with spaces 
    var color2 = $(locid).css("background-color"); // save the bgcolor of the main square 
    // animation that bring every square to the start position 
    $("#about").animate({top:'200px', left:"0", height: "180px", width:"200px"}, 1000, "easeInOutBack"); 
    $("#social_media").animate({top:'90px', left:"200px", height: "140px", width:"200px"}, 1000, "easeInOutBack"); 
    $("#bd_package").animate({top:'90px', left:"400px", height: "140px", width:"200px"}, 1000, "easeInOutBack"); 
    $("#services").animate({top:'230px', left:"200px", height: "130px", width:"560px"}, 1000, "easeInOutBack"); 
    $("#portfolio").animate({top:'360px', left:"200px", height: "350px", width:"200px"}, 1000, "easeInOutBack"); 
    $("#clients").animate({top:'360px', left:"400px", height: "220px", width:"200px"}, 1000, "easeInOutBack"); 
    $("#contact").animate({top:'290px', left:"600px", height: "160px", width:"220px"}, 1000, "easeInOutBack"); 
    $("#quote").animate({top:'230px', left:"760px", height: "60px", width:"60px"}, 1000, "easeInOutBack"); 
    $("#blog").animate({top:'280px', left:"840px", height: "60px", width:"60px"}, 1000, "easeInOutBack"); 
    $(".shape").animate({top:'200px', left:"200px", height: "0", width:"0"}, 1000, "easeInOutBack"); 

    // remove the images from the rollover 
    $("img", "li").remove(); 

    // create the main container 
    $(locid).css("z-index", 99); 
    $(locid).animate({ 
     top: '50px', 
     left: '150px', 
     width: '700px', 
     height: '585px' 
     }, 500 
    ); 

    // create the side navbar squares 
    $("li").not(locid).css("z-index", 3); 
    $("li").not(locid).animate({ 
     left: '10px', 
     width: '140px', 
     height: '60px' 
     }, 500 
    ); 

    // move the squares to create the side navbar 
    $("li").not(locid).eq(0).animate({top:'50px'}, 1000, "easeOutExpo"); 
    $("li").not(locid).eq(1).animate({top:'125px'}, 1000, "easeOutExpo"); 
    $("li").not(locid).eq(2).animate({top:'200px'}, 1000, "easeOutExpo"); 
    $("li").not(locid).eq(3).animate({top:'275px'}, 1000, "easeOutExpo"); 
    $("li").not(locid).eq(4).animate({top:'350px'}, 1000, "easeOutExpo"); 
    $("li").not(locid).eq(5).animate({top:'425px'}, 1000, "easeOutExpo"); 
    $("li").not(locid).eq(6).animate({top:'500px'}, 1000, "easeOutExpo"); 
    $("li").not(locid).eq(7).animate({top:'575px'}, 1000, "easeOutExpo"); 
    $("li").not(locid).eq(8).animate({top:'650px'}, 1000, "easeOutExpo"); 
    $("li").not(locid).eq(9).animate({top:'725px'}, 1000, "easeOutExpo"); 

    // animate the additional square around the main one 

    $("#title").delay(1000).queue(function(n2) {  // the title square gets the same color of the main container, an gets the the title from the class 
     $(this).html("<h1>" + title2 + "</h1>");  // the function queue allows me to delay the process of changing title when i click 
     n2(); 
    }).animate({ 
        top: '-40px', 
        left: '400px', 
        width: '450px', 
        height: '70px', 
        backgroundColor: color2 
        }, 1000); 
    $("#2").css("background-color", "#9090AF").delay(1400).animate({ 
        top: '50px', 
        left: '870px', 
        width: '150px', 
        height: '70px' 
        }, 500); 
    $("#3").css("background-color", "#47477A").delay(800).animate({ 
        top: '655px', 
        left: '270px', 
        width: '750px', 
        height: '70px' 
        }, 1000); 
    $("#4").css("background-color", "#A5264E").delay(700).animate({ 
        top: '450px', 
        left: '870px', 
        width: '120px', 
        height: '70px' 
        }, 456); 
    if(wrapperheightanim > 1000){ 
    $("#5").css("background-color", "#fff").delay(1000).animate({ 
        top: '745px', 
        left: '270px', 
        width: '250px', 
        height: '70px' 
        }, 1000); 
    } 

    } 

$("li").click(animated); 
animated2(); 

}); 

正如你所看到的功能動畫和animated2正好與一個發生在div當我點擊的差異 一樣，一個發生在一定的div時我加載頁面..hope與代碼更容易。我的問題是如何編寫一次函數，並執行一次，當我點擊一個元素，並且當頁面加載在特定元素保存在變量locid ..

Answer 1

你不能做$('li div').animate()因爲你的功能不是一個jquery對象的屬性（除非你像實現它 - 像插件一樣）。

您可以觸發事件click剛剛定義，但：

$('li div').click(); // or $('li div').trigger('click'); 

這將執行附有$("li div").click(animated);

Answer 2

您animated事件處理程序比方說，你的功能如下：

function animate() 
{ 
    // do complex stuff to 2 DOM nodes 
} 

要在<li>內的<div>內運行該功能如果你想運行animate在頁面加載時，做到這一點

$('li div').click(function() { 
    animate(); 
}); 

：：■點擊，這樣做

$(function() { 
    animate(); 
}); 

---

編輯：在另一方面，如果你的函數如下像這樣：

function animate(domElement) 
{ 
    // do complex stuff to domElement 
} 

要在任何上運行該函數一個<li>，被點擊時它裏面，這樣做：

$('li div').click(function() { 
    animate(this); 
}); 

如果你想運行在頁面加載的功能，在所有<div> S中的內<li> S，做到這一點：

$('li div').each(function(index, element) { 
    animate(element); 
});