Изменение размера DIV, сглаживание с помощью jQuery Easing - PullRequest
Новая
       15

Изменение размера DIV, сглаживание с помощью jQuery Easing

1 голос
/ 23 августа 2011

Я читал о функции Easing на веб-сайте jQuery.Моя цель - сгладить настройку Div, которая происходит при отправке формы.

JFiddle - http://jsfiddle.net/9qbfF/
Песочница - http://itsmontoya.com/work/playdeadcult/index.php
Не стесняйтесь проверить форму всм. упомянутую настройку Div.Пожалуйста, используйте test@test.com

Как видите, сейчас Div привязывается к месту, когда POST успешен.Я надеюсь использовать эффект Swing Easing, чтобы сделать этот процесс более приятным.

Я играл с Easing и чувствовал, что я все испортил.Я взял тестовый код, чтобы кто-то помог мне в этом.

Я ценю помощь!

1 Ответ

3 голосов
/ 23 августа 2011

Если я правильно понимаю, вы, вероятно, захотите заменить это: 

$('#myForm').ajaxForm(function() { 
  document.getElementById('formFill').style.visibility = 'hidden';
  document.getElementById('joinDiv').style.width = '842px';
  $("#joinText").html( 'Thank you for signing up!');
});

на это: 

$('#myForm').ajaxForm(function() { 
  document.getElementById('formFill').style.visibility = 'hidden';
  $("#joinText").html( 'Thank you for signing up!');
  $('#joinDiv').animate({width: '842px'}, 1000, 'swing');
});

Первый параметр animate - это хеш, который описывает«конечное состояние», в котором вы хотите завершить анимацию.Похоже, ваш joinDiv равен 649px или чем-то еще, поэтому вызов animate увеличит его с 649 до 842 в течение 1 секунды (1000 мс, 2-й параметр).Это довольно медленный переход для такого типа вещей, но вы можете легко настроить его, уменьшив 1000 до некоторого меньшего числа.Третий параметр - это функция ослабления.Есть необязательный 4-й параметр, который принимает функцию обратного вызова для выполнения чего-либо после завершения анимации.

В первом параметре может быть много чего еще.Например, у вас может быть {width: '842px', height: '200px', opacity: '0.0'}, и он будет расти по высоте и ширине, при этом он будет постепенно переходить от своего начального значения непрозрачности 80% к полностью прозрачному, все плавно одновременно.

...