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

試着用這一個：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類。

Answer 2

可以使用了slideDown高達

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

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

然後就在你的CSS元素的高度編輯。

Answer 3

你爲什麼不使用... slideUp()和slideDown()功能

效果基本show：隱藏與滑動匹配的元素。
SLIDEDOWN：以滑動方式顯示匹配的元素。

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

}); 

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

}); 

fiddle here

Answer 4

見fiddle：

(function() { 

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

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

Answer 5

試試我的演示這裏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); 
    } 
    }); 

})();