0

I am relatively new to jquery, and I am making a simple website. It has three boxes, all of which, when clicked, the other two will .fadeOut('slow');. The problem is, all of the boxes have the <center> tag around them. Lets say I click the box on the left. The middle and right boxes will .fadeOut('slow') but then the left block floats to the middle. I would be fine with this if the going to the middle was smooth, but its not.

Here's the jsfiddle: http://bit.ly/19PUmS5

4

3 回答 3

1

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

另外，我稍微简化了您的 javascript。还有一件事：<center>标签在 html5 中已被弃用。尽量避免使用它。让我知道你的想法！

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/

于 2013-10-18T00:34:06.783 回答
0

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

$ele.fadeOut('slow', function() {
   $ele.css("display", "initial").css("visibility", "hidden");
})
于 2013-10-18T00:03:44.663 回答
0

您应该使用.fadeTo而不是.fadeOut. 然后，您需要稍微更改您的代码，以隐藏和显示您的<center>

小提琴

于 2013-10-18T00:22:10.857 回答