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 ...请使用代码更容易。我的问题是如何编写一次函数并在我点击一个元素时执行一次，一次当页面加载特定元素时保存在变量locid中..

Answer 1

你不能做$('li div').animate()，因为你的函数不是jquery对象的属性（除非你实现它 - 就像插件一样）。

您可以触发刚刚定义的事件click：

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

这将执行附加animated

的$("li div").click(animated);事件处理程序

Answer 2

假设您的函数如下所示：

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

要在点击<div>内的<li>时运行该功能，请执行以下操作：

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

如果您想在页面加载时运行animate，请执行以下操作：

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

修改：另一方面，如果您的功能如下所示：

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

要在<div>内的任何<li>上运行该功能，点击它时，请执行以下操作：

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

如果您想在页面加载上运行该函数，请在<div>内的所有<li>上执行此操作：

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

Jquery：页面加载时的函数调用

2 个答案: