Jquery DIV Анимация - PullRequest
Новая
       12

Jquery DIV Анимация

0 голосов
/ 09 февраля 2012

Я пытаюсь анимировать мой #main div так, чтобы он исчезал и скользил поверх моего #header div при нажатии на кнопку «Работа», а затем исчезал и скользил вниз, когда «О» или «О»Контакты "ссылки нажимаются.Что-то не так, и это не оживляет.Не уверен почему.Кто-нибудь может помочь?

http://jsbin.com/odorah/edit#javascript,html,live

Я знаю, что в идеале функция .slideUp / .slideDown была бы в порядке, но по какой-то причине она мешает используемому мной плагину fittext.Просто к вашему сведению 

$(document).ready(function(){


    $('#workclick').click(function(){
                        $('#main').animate({top:'-50%', opacity:'1'},{queue:false,duration:500, easing:"easeOutQuart"});
                    }, function(){
                        $('#header').animate({top:'0px', opacity:'0'},{queue:false,duration:200});
                    });

                    $('#aboutclick').click(function(){
                                        $('#main').animate({top:'50%', opacity:'0'},{queue:false,duration:500, easing:"easeOutQuart"});
                                    }, function(){
                                        $('#header').animate({top:'0px', opacity:'1'},{queue:false,duration:200});
                                    });
                    $('#contactclick').click(function(){
                                                        $('#main').animate({top:'50%', opacity:'0'},{queue:false,duration:500, easing:"easeOutQuart"});
                                                    }, function(){
                                                        $('#header').animate({top:'0px', opacity:'1'},{queue:false,duration:200});
                                                    });
});

1 Ответ

1 голос
/ 09 февраля 2012

Ладно, разобрался с твоей проблемой.Замените функцию первого щелчка следующим: 

$('#workclick').click(function(){
    $('#main').animate(
      {top:'-50%', opacity:'1'},
      {
        queue:false,
        duration:500,
        complete:function(){
            $('#header').animate(
              {top:'0px', opacity:'0'},
              {queue:false,duration:200}
            );
        }
      }
    );
});

Вы можете добавить переход позже.Дело в том, что JQuery имеет две формы функции анимации.Оба позволяют вам перезвонить по завершении.Вот они: 

.animate( properties [, duration] [, easing] [, complete] )
.animate( properties, options )

Источник: http://api.jquery.com/animate/

Редактировать: использование обратного вызова или постановки в очередь решает проблему, поскольку анимации JQuery ставятся в очередь.jQuery не может создавать синхронные анимации, см .: https://stackoverflow.com/a/1594085/844728

PS вам придется изменить все ваши вызовы на .animate, исправляя эту ошибку.

...