Question

我对jquery比较新，我正在制作一个简单的网站。它有三个框，所有这些框在点击时，其他两个将.fadeOut('slow');。问题是，所有框都有<center>标记。假设我单击左侧的框。中间和右侧框将.fadeOut('slow')，但随后左侧框架浮动到中间。如果走到中间是顺利的话，我会很好，但事实并非如此。

这是jsfiddle：http://bit.ly/19PUmS5

Answer 1

我认为关键是在整个javascript中使用fadeTo（）。 fadeTo（）不会将其从文档中删除，因此您将避免将其他方块跳转到新位置。

另外，我精简了你的javascript。还有一件事：html5中不推荐使用<center>标记。尽量避免使用它。让我知道你的想法！

HTML：

<body>
    <div id="clickableContainer">
    <div class="clickable" id="one"></div>
    <div class="clickable" id="two"></div>
    <div class="clickable" id="three"></div>
    </div>
    <article class="slider" style="display:none;" id="1"><div class="back">Back</div>
    </article><article class="slider" style="display:none;" id="2"><div class="back">Back</div>
    </article><article class="slider" style="display:none;" id="3"><div class="back">Back</div>
    </article>
</body>

使用Javascript：

$(document).ready( function(){
    $('#one').on("click",function(){
        $("#two, #three").delay(300).fadeTo(300,0, function(){
            $('#one').delay(1000).fadeTo(300,0,function(){
                $("#one, #two, #three").css("display","none");
                $('#1').delay(1900).fadeTo('slow', 1);
            });                        
        });
    });
    $('#two').on("click",function(){
        $("#one, #three").delay(300).fadeTo(300,0, function(){
            $('#two').delay(1000).fadeTo(300,0,function(){
                $("#one, #two, #three").css("display","none");
                $('#2').delay(1900).fadeTo('slow', 1);
            });                    
        });
    });
    $('#three').on("click",function(){
        $("#one, #two").delay(300).fadeTo(300,0, function(){
            $('#three').delay(1000).fadeTo(300,0,function(){
                $("#one, #two, #three").css("display","none");
                $('#3').delay(1900).fadeTo('slow', 1); 
            });                
        });
    });
    $('article').on("click",function(){
        $(this).fadeTo(300,0,function(){
            $(this).css("display","none");
            $('#one, #two, #three').delay(800).fadeTo(300,1);
        });        
    });
});

http://jsfiddle.net/itsmikem/nU8hC/3/

Answer 2

使用完整操作调用该函数，该操作将可见性设置为隐藏：

$ele.fadeOut('slow', function() {
   $ele.css("display", "initial").css("visibility", "hidden");
})

Answer 3

您应该使用.fadeTo代替.fadeOut。然后，您需要稍微更改代码，隐藏并显示<center>

<强> Fiddle

当其他div消失时，Div移动到中心

3 个答案: