JQuery слайд страницы - PullRequest
Новая
       20

JQuery слайд страницы

1 голос
/ 18 февраля 2011

Я пытаюсь создать несколько анимаций при загрузке страницы и нажатии кнопки.

При загрузке страницы div должен скользить снизу страницы. Когда пользователь нажимает кнопку, элемент div соскользнет с верхней части страницы, а затем перейдет к URL-адресу после завершения слайда.

Функция загрузки (слайд снизу) вообще не срабатывает, и я не знаю, как сказать ей перейти по URL после анимации завершена. Вот jsFiddle. 

<head> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> 
</head> 
<body> 

<div id="content-container"> 
<div id="content" style="position:relative; z-index:2000;" >
<a href="http://google.com" id="moveUp"><button>button</button></a>
</div> 
</div> 

<div id="panel"> 
<div class="content"> 
<img src="http://www.google.com/images/logos/ps_logo2.png" width="122"><br /><br /> 
</div> 
</div> 

<script>
// On load panel slides in from bottom of page
$(function() {
  $("#panel").one('load', function () {
      $("#panel").animate({
            marginBottom: "-=1250px", height: "+=50px" }, 1000);
      }).each(function() {
    if(this.complete) $(this).load();
  });
});

// On click slide panel off the top of page
$("#moveUp").click(function(){
     $("#panel").animate({
          marginTop: "-=250px",          
          height: "+=50px"
    }, 1000);

  // After animation completes THEN go to URl???
   $(this)........;
});
</script>

</body>

Ответы [ 2 ]

1 голос
/ 18 февраля 2011

Трудно попытаться понять, что именно вы пытаетесь достичь, но это jsFiddle может помочь

Все, что я сделал, это абсолютно позиционировал div и затем при загрузке изменил значение top так, чтобы оно анимировалось снизу.

0 голосов
/ 18 февраля 2011

По поводу вашей проблемы с нагрузкой:

Помните, $ (function ()); синтаксис сокращённо для:

$ (документ) .load (function () {})

Другими словами, к моменту запуска кода #panel уже будет загружен. Вот почему ваш обработчик событий никогда не вызывается! Вы не добавляете слушателя до тех пор, пока событие не будет запущено

Попробуйте вместо этого: 

$(function() {
  $("#panel").animate({
    marginBottom: "-=1250px", height: "+=50px" }, 1000);
  });
});

Что касается URL-адреса после проблемы с анимацией, вы можете добавить обратный вызов к анимации, передав третий параметр. Этот параметр позволяет вам определить функцию, которая вызывается после завершения анимации.

Попробуйте это: 

$("#moveUp").click(function(){
     $("#panel").animate({
          marginTop: "-=250px",          
          height: "+=50px"
    }, 1000,
    function() {
        window.location="http://google.com";
    });
});
...