Как вернуть анимацию с помощью jQuery? - PullRequest
Новая
       25

Как вернуть анимацию с помощью jQuery?

0 голосов
/ 14 октября 2011

Мне интересно, как восстановить эту анимацию с помощью jQuery, посмотрите эту страницу:

http://bksn.mx/TAC/

Правильный путь - когда вы нажимаете «Equipo» , он показывает плавную анимацию и нажимает ее снова, он очень хорошо переворачивает анимацию.

Неправильный способ - когда вы нажимаете «Arquitectura» , он запускает плавную анимацию и снова нажимает эту кнопку ..... это выглядит испорченным и не восстанавливает анимацию ...

Я пытался создать .toggle(); методы, но это не сработало 3 раза, я понятия не имел, почему ...

Существует скрипт Arquitectura : 

$('h2#arq').click(function() {
  $('section#pryctA4, section#ext').animate({
    opacity: 'toggle',
    height: 'toggle',
    margin: 20
    }, {
    duration: 750,
    specialEasing: {
      width: 'linear',
      height: 'easeInOutQuad'},
    }
  );
});

Еще один скрипт "Equipo" , если вы хотите: 

$('h2#equipo').click(function() {
  $('section#team').animate({
    opacity: 'toggle',
    height: 'toggle'
    }, {
    duration: 750,
    specialEasing: {
      width: 'linear',
      height: 'easeInOutQuad'},
    }
  );
});

Спасибозаранее!

1 Ответ

1 голос
/ 14 октября 2011

Ваше свойство margin не переключается (в анимациях в оба раза, что дает эффект рывка): 

$('h2#arq').click(function() {
  $('section#pryctA4, section#ext').animate({
    opacity: 'toggle',
    height: 'toggle',
    margin: 20},
{
    duration: 750,
    specialEasing: {
      width: 'linear',
      height: 'easeInOutQuad'},
    }
  );
});

Грязный способ исправить это - включить встроенный if: 

$('h2#arq').click(function() {
  $('section#pryctA4, section#ext').animate({
    opacity: 'toggle',
    height: 'toggle',
    margin: ($(this).css('margin') == 20) : 0 ? 20},
{
    duration: 750,
    specialEasing: {
      width: 'linear',
      height: 'easeInOutQuad'},
    }
  );
});

Не уверен, что существует другое более элегантное решение.

...