如果隐藏元素,则Jquery css(width,0)不起作用

时间:2012-02-13 09:48:23

标签: javascript jquery

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

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

我希望它能像这样工作:

  1. 通过向下滑动并一起增加宽度来显示红色框。
  2. 再次单击并向上滑动框,然后将宽度设置为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});
        });            
    }
    
  3. 更新: 奇怪的是,如果我将一个alert()添加到slidedown的回调函数中,它就永远不会被调用。

3 个答案:

答案 0 :(得分:1)

编辑:对不起第一个答案,没注意。

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

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

因此,您应该修改hideDropDown方法,如下所示:


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

来自jQuery docs

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

答案 1 :(得分:0)

也许你只需要使用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);
}

答案 2 :(得分:0)

为什么不在.slideUp()之后链接.animate()?

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