JQuery的负载动画/过渡

Question

我上点击加载div使用jQuery load方法，其工作正常，但我想添加动画像效果基本show /了slideDown效果，但不知道如何实现这一点：

以下是代码

$('.search_bar > input').click(function(){ 
     $("#search_layer").load("file-url.html"); 
     $("body").css({"overflow": "hidden", "height": "auto"}); 
}); 

任何人都可以请建议如何添加效果基本show /向下转换，我想CSS的过渡，以及，但没有运气

在此先感谢！

Answer 1

使用.load(url, callback)做元素被加载后的东西。首先设置它的通过CSS display: none，不是做

$('#search_layer').load(
    'file-url.html', 
    function() { 
     $('#search_layer .div-to-show').slideDown(); 
    } 
); 

Answer 2

$('.search_bar > input').click(function(){ 
     $("#search_layer").load("file-url.html"); 
$("#search_layer").slideToggle(); 
     $("body").css({"overflow": "hidden", "height": "auto"}); 
}); 

Answer 3

可以使用Velocity.js

例如

的$（document）。在（ “点击”， “.search_bar>输入” function（）{
$（this）.velocity（“transition.whirlOut”，{ stagger：1000， duration：1000， complete：function（）{ // on complete ... } }）; }）;

Answer 4

可以在负载方法中添加一个回调函数，然后在回调动画吧：

$('.search_bar > input').click(function(){ 
     $("#search_layer").load("file-url.html",'', animateContent()); 
     $("body").css({"overflow": "hidden", "height": "auto"}); 
}); 

function animateContent() { 
     $("#search_layer").animate({ 
     left: '250px', 
     opacity: '0.5', 
     height: '150px', 
     width: '150px' 
    }); 
}