Может ли быть функция шага и нормальная функция для обратного вызова .animate () в jQuery? - PullRequest
Новая
       1

Может ли быть функция шага и нормальная функция для обратного вызова .animate () в jQuery?

5 голосов
/ 25 июня 2011

Я пытаюсь использовать функцию step:, чтобы мои div "tab" и div "options" выдвигались одновременно (т.е. синхронизировали анимацию двух div), но мне также нужен обычныйфункция для анимации.

Возможно ли использовать оба этих типа функций в качестве функции обратного вызова для .animate ()?

Редактировать:

Тестpage

На приведенной выше тестовой странице я хочу сделать еще один слайд div по щелчку «текстовой вкладки» в верхнем левом углу, НО в соответствии с документацией jQuery .animate ()., функция step: используется для синхронизации анимации различных элементов, и я здесь - мой JS: 

$( "#optsdiv" ).hide();
$( "#closediv" ).hide();
$( "#opendiv" ).click( function() {
  $( "#opendiv" ).animate( { left: "+=100px", opacity: 1 }, 1400, "easeOutExpo", function() {
     $( "#opendiv" ).hide();
     $( "#opendiv" ).animate( { left: "-=100px", opacity: 0.6 }, 0 );
     $( "#closediv" ).show();
    });
});

$( "#closediv" ).click( function() {
  $( "#closediv" ).animate( { left: "-=100px", opacity: 0.6 }, 1400, "easeOutExpo", function() {
    $( "#opendiv" ).show();
    $( "#closediv" ).hide();
    $( "#closediv" ).animate( { left: "+=100px", opacity: 1 }, 0 );
   });
});

Как видите, я использую "нормальную" функцию (не-шаг:функция), чтобы закончить анимацию ... поэтому мне было интересно, смогу ли я использовать функцию, которую я использую в данный момент, при реализации функции step: function в том же обратном вызове, чтобы синхронизировать скольжение из вкладки и другого div.

1 Ответ

8 голосов
/ 26 июня 2011

Если под «обычная функция» вы подразумеваете обратный вызов в конце анимации, тогда да, просто установите все свойства анимации, используя второй аргумент options : 

$('.someElement').animate({width:100}, { duration:1000,
                                         step: function(){},
                                         complete: function(){} });

Пример: http://jsfiddle.net/n2pZp/1/

...