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屋！