Панель jQuery - функция slideOut и fadeIn одновременно - PullRequest
Новая
       40

Панель jQuery - функция slideOut и fadeIn одновременно

1 голос
/ 04 октября 2010

Я работаю над формой php с некоторыми jquery, особенно для сообщений об ошибках и спасибо. Часть jquery можно посмотреть здесь:
http://jsbin.com/ohuya3
A рабочий пример формы доступен здесь:
http://cozyphant -living.com / php / formular4.htm
Чтобы увидеть панель сообщений, нажмите кнопку «Formular senden».
Я хотел, чтобы панель с надписью «Спасибо» и / или «Ошибка» выдвинулась, и текст постепенно исчез. Скрипт принимает мой код (потому что он все еще работает), но на самом деле я не вижу, чтобы текст действительно исчезал. образцы раздвижных панелей с выцветанием в тексте. Так что я думаю, что это был неправильный вид кодирования.
Любая помощь приветствуется.

Ответы [ 2 ]

1 голос
/ 04 октября 2010

Проблема в том, что ваш #formResponse контейнер сначала не скрыт.Как только текст ответа будет вставлен в него, он будет отображаться напрямую, а не исчезать. Вам необходимо объявить display: none;, чтобы скрыть его: 

<div class="contact-form-text" id="formResponse" style="display: none;"></div>

Функция обратного вызова AJAX вставиттекст в него, а затем добавить его.

ОБНОВЛЕНИЕ: Если вы хотите ОБА слайд и затемнение, то вам нужно будетиспользуйте дополнительный контейнер ответов, потому что, как только он выдвигается, он IS уже виден и не может исчезнуть со 100% видимости.То, что вы хотите, будет выглядеть примерно так: 

<div id="formResponse_container" style="display:none;"> <!-- extra wrapper -->
    <div id="formResponse" class="contact-form-text" style="display:none;"></div>
</div>

, а затем в скрипте jQuery вместо 

$("#formResponse").hide().html(data).show('slow'); //hide before slide!

вы получите 

$("#formResponse_container").slideDown("slow", function() {
    $("#formResponse").html(data).fadeIn("slow");
});

Чтоэто значит, что он сначала скользит вниз по внешнему контейнеру, а после завершения анимации он исчезает во внутреннем контейнере.

Живой пример

Надеюсь, этопомогает.

1 голос
/ 04 октября 2010

Используйте .show() с продолжительностью одновременного эффекта слайд + эффект затухания, в вашем случае: 

$("#formResponse").html(data).show('slow')

Вы можете проверить эффект здесь .

Специально для вашего кода необходимо удалить margin: 0 auto; из объекта #formResponse, что приведет к проблеме с вышеуказанным анимационным кодом.Кроме того, вы можете сериализовать вашу форму немного проще в обслуживании, например, так: 

$("#contact_form").submit(function() {
  var arr = $(this).serializeArray();         //serialize form, based on names
  arr.push({ name: 'senden', value: 'yes' }); //add the senden variable
  $.post('mail.php', arr, function(data) {    //pass that object as your data
    $("#formResponse").hide().html(data).show('slow'); //hide before slide!
  }, 'text');
  return false;
});
...