代码之家 › 专栏 › 技术社区 › cityy

fadeIn()在hide()之后不起作用,hide(()未到达.done()

fadeout fadein toggle jquery

cityy · 技术社区 · 10 年前

我遇到了fadeIn()在hide()或fadeOut()之后拒绝工作的问题。我正在尝试用渐变动画切换div(#content)。乍一看,它似乎有效,但当试图切换第二次时,事情就破裂了。

我将尝试描述错误是如何发生的:

第一步: 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()也会发生同样的情况;

第一步,第二步: 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()不起作用。

#content的style.css(初始状态):

#content{
  display:none;
  width:100%;
  height:100%;
  background:red;
  position:absolute;
  top:0;
  left:0;
  z-index: 99999999;    
}

如果有任何帮助,我将不胜感激。

1 回复 | 直到 10 年前

Banana ChrisBurns 10 年前

根据 jQuery .Queue 文档:

请注意,在使用jQuery.queue()添加函数时,我们应该确保最终调用jQuery.dequeue((),以便执行行中的下一个函数

因此,您只需调用 .dequeue 第二步:

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