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

我创建了一个快速jsfiddle here，表明它不起作用。如果元素被隐藏，jquery css（width，0）不起作用

我遇到的问题是滑上去了。我希望它能够在滑动完成后只将宽度设置为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}); 
    });    
}

UPDATE：奇怪的是，如果我添加了一个警报（）到回调函数了slideDown它永远不会被调用。

来源

2012-02-13 John Magnolia

当我点击多次时动画显示相同？我在Chrome17/WindowsServer上 – gideon 2012-02-13 09:52:06

slideUp会通过滑动它来隐藏它，然后将它的宽度设置为0有什么用处？ – Poonam 2012-02-13 09:53:21

由于第一个动画与滑动和宽度在一起。第二次调用该函数时，宽度已经设置为内联。 – 2012-02-13 09:55:08

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

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

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

所以，你应该如下修改hideDropDown方法：

 

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

从jQuery docs：

“的.promise（）方法返回一个动态生成的承诺，解决了曾经的一切行动绑定到集合的某些类型，已排队或未结束。“

来源

2012-02-13 09:54:03 Matyas

OP使用display：none; – 2012-02-13 09:54:56

更正的答案。对不起，没有完全阅读这个问题。 – Matyas 2012-02-13 10:10:26

非常感谢。承诺功能看起来很酷。我将对此有一个很好的阅读。 – 2012-02-13 10:15:13

也许你只需要使用动画来宽重置为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); 
}

来源

2012-02-13 09:56:28 sinsedrix

你的两个例子都可以滑下来，但由于宽度的原因，立即隐藏起来。 – 2012-02-13 10:01:16

我想要幻灯片完成，然后将宽度设置为0 – 2012-02-13 10:01:32

'slideUp' /'slideDown'默认情况下不会动画宽度。也许你应该使用自定义的动画功能。请参阅http://jsfiddle.net/sinsedrix/reG5H/12/ – sinsedrix 2012-02-13 10:10:28

为什么不链.animate（后）。向上滑动（）？

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

来源

2012-02-13 09:59:37 fayerth

因为我希望幻灯片完成（完全隐藏），然后将宽度设置为0 – 2012-02-13 10:04:22

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

回答

相关问题