jquery - 用于验证的 Jquery 幻灯片动画

Question

我试图在输入字段的焦点上滑动一个 div 以进行验证。我想实现类似https://mailchimp.com/signup/的动画

小提琴：http: //jsfiddle.net/6A9Qa/

$('#name').on('focus',function() {
   $(this).next().show().animate({height: '25px'}, {duration: 250});

});

$('#name').on('blur',function() {
    $(this).next().hide().animate({height: '0'}, {duration: 250}); 
});

我无法像邮件黑猩猩那样以正确的方式获得动画。

Answer 1

您可以使用上下滑动

$('#name').on('focus',function() {
   $(this).next().slideDown(2000);
});

$('#name').on('blur',function() {
   $(this).next().slideUp(2000);
});

然后只需编辑你的CSS元素的高度。

Answer 2

你为什么不使用.. slideUp()和slideDown()函数

SLIDEUP：通过滑动隐藏匹配的元素。
SLIDEDOWN：滑动显示匹配的元素。

$('#name').on('focus',function() {
 $(this).next().slideDown('slow');

});

$('#name').on('blur',function() {
 $(this).next().slideUp('slow');

});

在这里摆弄

Answer 3

见小提琴：

(function () {

  $('#name').on('focus', function () {
    $(this).next().slideToggle();
  });

  $('#name').on('blur', function () {
    $(this).next().slideToggle();
 });
})();

Answer 4

在这里试试我的演示http://jsfiddle.net/6A9Qa/7/

(function() {

  $('#name').on('focus',function() {
    $(this).nextAll('.generic').slideDown(250);
  });

   $('#name').on('change',function() {
    $(this).nextAll('.generic').slideUp(250);
     if($('#name').val() !== ''){
        $(this).nextAll('.error').slideDown(250);
     }
     else {
        $(this).nextAll('.error').slideUp(250);
     }
  });

})();

Answer 5

试试这个：http: //jsfiddle.net/6A9Qa/9/

(function() {
  $('#name').on('focus',function() {
    $(this).next().show().animate({height: '25px'},250);
  });
  $('#name').on('blur',function() {
     $(this).next().animate({height: '0'}, 250, function(){
        $('.validate').hide();
     });
  });
})();

并且还需要向 css 类添加height:0;css 属性.validate。