CODEWITHSUNDEEP
jqueryhtmlcssjquery-animate
M1X
M1X

Reputation: 5354

Animate div on click and update DOM

I'm trying to animate a div when it's clicked. If a div is clicked it should animate and swap with the first div and also the DOM should be updated. The problem now is with te distance variable. I can't manage to calculate the distance between two divs.

This is my fiddle: http://jsfiddle.net/GUsYQ/120/

<div id="container">
    <div id="one" class="move">div 1</div>
    <div id="one" class="move">div 2</div>
    <div id="one" class="move">div 3</div>
</div>

var animating = false;

$('#container').on('click', '.move', function (e) {

    var clickedDiv = $(this).closest('div'),
        prevDiv = $("#one"),
        //distance = clickedDiv.offset.left - $("#one").offset.left;
        distance = 60; //manually set

    if (prevDiv.length) {
        animating = true;
        $.when(clickedDiv.animate({
           left: -distance
        }, 2000),
        prevDiv.animate({
            left: distance
        }, 2000)).done(function () {
            prevDiv.css('left', '0px');
            clickedDiv.css('left', '0px');
            clickedDiv.insertBefore($("#one"));
            animating = false;
        });
    }
});

#container {
    color:#fff;
    position: relative;
    text-align: center;
}

#container div {
    position: relative;
    background:#ff00ab;
    padding:5px;
    border-radius:3px;
    text-align:center;
    display:inline-block;
    margin: 20px;
}

Upvotes: 0

Views: 116

Answers (2)

jpreynat
jpreynat

Reputation: 950

In fact, it was your jQuery selectors that failed to find the corresponding divs.

.move being your <a> tags, what you did was:

// Select the first <a> tag!!
prevDiv = $(this).first();
// Try to insert a div before the <a> tag
clickedDiv.insertBefore(prevDiv);

I updated the JSFiddle with the good selectors: http://jsfiddle.net/jpreynat/sh9vbbum/1/

Upvotes: 2

william.eyidi
william.eyidi

Reputation: 2365

you should animate the css as well =, I am talking about the z-index property. basically if you want a div to be on top of an another one it should result in a z-index higher than the one you are trying hide.

Here is the W3C official page for manipulating the z-index: http://www.w3.org/wiki/CSS/Properties/z-index

Upvotes: 1

Related Questions