Jquery: вызовы функций при загрузке страницы - PullRequest
Новая
       0

Jquery: вызовы функций при загрузке страницы

2 голосов
/ 14 декабря 2011

У меня есть сложная функция под названием 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(); 

});

, поскольку вы можете видеть, что функции animated и animated2 в точности совпадают с той разницей, что происходит с div, когдаЯ щелкаю, когда происходит загрузка с определенным div, я загружаю страницу. Надеюсь, с кодом это проще.Моя проблема заключается в том, как написать функцию один раз и выполнить ее один раз, когда я нажимаю на один элемент, и один раз, когда страница загружается на конкретный элемент, сохраненный в переменной locid.

Ответы [ 2 ]

2 голосов
/ 14 декабря 2011

Вы не можете сделать $('li div').animate(), потому что ваша функция не является свойством объекта jquery (если вы не реализуете его так - как плагин).

Вы можете вызвать событие click, которое вытолько что определено: 

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

Это выполнит ваш animated обработчик событий с $("li div").click(animated);

1 голос
/ 14 декабря 2011

Скажем, ваша функция выглядит следующим образом: 

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> s, которые находятся внутри <li> s, сделайте это: 

$('li div').each(function(index, element) {
  animate(element);
});
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...