0

検証のために、入力フィールドのフォーカスで 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}); 
});

メール チンパンジーのように適切な方法でアニメーションを取得できません。

4

5 に答える 5

0

スライドダウンとアップを使用できます

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

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

CSS で要素の高さを編集するだけです。

于 2013-01-08T07:53:41.600 に答える
0

なぜあなたは使わないのですか..slideUp（）とslideDown（）関数

SLIDEUP: 一致した要素をスライド モーションで非表示にします。
SLIDEDOWN: 一致した要素をスライド モーションで表示します。

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

});

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

});

ここでフィドル

于 2013-01-08T07:54:56.180 に答える
0

フィドルを参照してください：

(function () {

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

  $('#name').on('blur', function () {
    $(this).next().slideToggle();
 });
})();
于 2013-01-08T07:55:54.807 に答える
0

ここで私のデモを試してください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);
     }
  });

})();
于 2013-01-08T07:56:02.193 に答える
0

これを試してみてください：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 プロパティを.validatecss クラスに追加するというもう 1 つの要件があります。

于 2013-01-08T08:00:08.923 に答える