Question

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

的动画

$('#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

你可以使用slidedown和up

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

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

然后只需在你的css上编辑元素的高度。

Answer 2

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

幻灯片：使用滑动动作隐藏匹配的元素 SLIDEDOWN：以滑动方式显示匹配的元素。

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

});

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

});

fiddle here

Answer 3

请参阅fiddle：

(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();
     });
  });
})();

还有一项要求是将height:0; css属性添加到.validate css类。

用于验证的Jquery幻灯片动画

5 个答案: