jQuery加载动画/过渡

Question

我正在使用jQuery加载方法在单击时加载div ，其工作正常，但我想添加诸如slideUp / slideDown效果的动画，但不确定如何实现此目的：

以下是代码

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

任何人都可以提出如何添加slideUp / Down过渡的建议，我也尝试过CSS过渡，但是没有运气

提前致谢！

Answer 1

使用.load(url, callback)在元素加载后做一些事情。 首先设置它的display: none通过css，而是

$('#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）.on（“ click”，“ .search_bar> input”，函数（）{
$（this）.velocity（“ transition.whirlOut”，{错开：1000，持续时间：1000，完成：function（）{//完成时...}}）； }）;

Answer 4

您可以在load方法中添加一个回调函数，然后在回调中为其设置动画：

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