CODEWITHSUNDEEP
javascriptjqueryhtmlcss
user2620851
user2620851

Reputation: 51

Div moves to center when other div's disappear

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

Upvotes: 0

Views: 226

Answers (3)

itsmikem
itsmikem

Reputation: 2168

I think the key for you is to use fadeTo() throughout your javascript. The fadeTo() doesn't take it out of the document, so you will avoid the jump of the other squares to a new position.

Also, I streamlined your javascript a bit. One more thing: the <center> tag is deprecated in html5. Try to avoid using it. Let me know what you think!

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/

Upvotes: 1

Giovanni Silveira
Giovanni Silveira

Reputation: 1281

You should use .fadeTo instead of .fadeOut. You would then need to change your code slightly, to hide and show your <center>

Fiddle

Upvotes: 0

megawac
megawac

Reputation: 11353

Call the function with a complete action which sets visibility to hidden:

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

Upvotes: 0

Related Questions