hideIn)之后fadeIn()不起作用,hide()未达到.done() [英] fadeIn() not working after hide(), hide() not reaching .done()
问题描述
我有一个关于hideIn()或在hide()或fadeOut()之后拒绝工作的问题.我正在尝试使用淡入淡出动画切换div(#content).乍一看,它似乎有效,但是当尝试第二次切换时,事情就中断了.
I have a problem with fadeIn() refusing to work after hide() or fadeOut(). I am trying to toggle a div (#content) with a fade animation. On first glance, it seems to work but when trying to toggle a second time, things break.
我将尝试描述错误的发生方式:
I'll try to describe how the error occurs:
第一步: fadeIn()(有效)
$('.popup a').click(function(){
$("#content").css("background-color", "#DDD").fadeIn(200); // works, display changes to block
$('#content').children().fadeIn(600, function(){
$("#content").animate({
"border-top-width": "6px"
}, 200);
});
});
这确实可以正常工作.
第二步: hide()(有点破了?)
$('.header li').click(function (){
$('#content').children().fadeOut(300, function(){ // works
$('#content').animate({ //works
width: "0%",
height: "0%",
left: "49%",
right: "49%",
top: "49%",
bottom: "49%",
"border-top-width": 0
}, 200).queue(function(){
$('#content').hide().promise().done(function(){ //works! display changes to none
alert("Done hide()"); // this never fires
});
});
});
}
这有效,但是hide()完成后,警报永远不会触发. fadeOut()也会发生同样的事情
This works but the alert never fires after hide() completes. The same thing happens with fadeOut();
第一步,第二步: fadeIn()(根本不起作用)
$('.popup a').click(function(){
$("#content").css("background-color", "#DDD").fadeIn(200); // doesn't work! display remains set to none
$('#content').children().fadeIn(600, function(){ // works
$("#content").animate({
"border-top-width": "6px"
}, 200);
});
});
这是它完全损坏的地方,#content上的fadeIn()不起作用.
This is where it breaks completely, fadeIn() on #content doesn't work.
style.css用于#content(初始状态):
#content{
display:none;
width:100%;
height:100%;
background:red;
position:absolute;
top:0;
left:0;
z-index: 99999999;
}
我将不胜感激,在此先感谢您.
I would appreciate any help, thank you in advance.
推荐答案
根据 jQuery .Queue 文档:
请注意,当使用jQuery.queue()添加函数时,我们应确保最终调用jQuery.dequeue(),以便执行该行中的下一个函数."
因此,您要做的就是在第二步中调用.dequeue
:
therefore, all you need to do is call a .dequeue
in your 2nd step:
$('.header li').click(function () {
$('#content').children().fadeOut(300, function () { // works
$('#content').animate({ //works
width: "0%",
height: "0%",
left: "49%",
right: "49%",
top: "49%",
bottom: "49%",
"border-top-width": 0
}, 200).queue(function () {
$('#content').hide().promise().done(function () { //works! display changes to none
alert("Done hide()"); // this never fires
});
//add this line
jQuery.dequeue(this);
});
});
});
这篇关于hideIn)之后fadeIn()不起作用,hide()未达到.done()的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!