Question

我创建了一个快速jsfiddle here，表明它无效。

我遇到的问题是向上滑动。我希望它工作，以便它只在完成幻灯片后将宽度设置为0。在完成幻灯片后，似乎没有调用明显的回调函数。

我希望它能像这样工作：

通过向下滑动并一起增加宽度来显示红色框。

再次单击并向上滑动框，然后将宽度设置为0.因此，如果用户再次单击该按钮，则第一个动画将显示为相同。

var $ foo = $（“＃elm”）;

$("#btn").toggle(function() {
    showDropDown();
}, function() {
    hideDropDown();
});

function showDropDown(){
    $foo.slideDown({duration:500, queue:false}).animate({"width": 400}, 250);
}

function hideDropDown(){
    $foo.slideUp({duration:800, queue:false},function(){
        $foo.css({"width": 0});
    });            
}

更新：奇怪的是，如果我将一个alert（）添加到slidedown的回调函数中，它就永远不会被调用。

Answer 1

编辑：对不起第一个答案，没注意。

问题是回调没有执行，因为你没有根据API给出参数，并且回调没有“连线”。

相反，您可以使用promise().done(...)组合来实现您想要的目标。

因此，您应该修改hideDropDown方法，如下所示：


function hideDropDown(){
    $foo.slideUp({duration:800, queue:false}).promise().done(function(){
        $foo.css("width", "0px");
    });            
}

来自jQuery docs：

“.promise（）方法返回一个动态生成的Promise，一旦绑定到已排队或未排队的集合的某个类型的所有操作都已结束，它就会被解析。”

Answer 2

也许你只需要使用animate将宽度重置为0，如this：

var $foo = $("#elm");

$("#btn").toggle(function() {
    showDropDown();
}, function() {
    hideDropDown();
});

function showDropDown(){
    $foo.slideDown({duration:500, queue:false}).animate({"width": 400}, 250);
}

function hideDropDown(){
    $foo.slideUp({duration:800, queue:false}).animate({"width": 0}, 1);
}

或将宽度设置为0，如this：

function hideDropDown(){
    $foo.slideUp({duration:800, queue:false}).width(0);
}

Answer 3

为什么不在.slideUp（）之后链接.animate（）？

$foo.slideUp({duration: 800, queue: false}).animate({"width": 0}, 800);

如果隐藏元素，则Jquery css（width，0）不起作用

3 个答案: