CODEWITHSUNDEEP
jquerycsscss-animations
Alex
Alex

Reputation: 2062

jQuery - unable to apply CSS animation during CSS class swap

I have two divs, which move 30px up when the user clicks on a button (and the other one moves 30px down). I'm achieving this by swapping between two css classes, up and down. The problem is that I cant add animation to the class swap even when I add transition: all 1s ease; to the appropriate css class. How can I swap between the two so the divs will slide up and down nicely? JSFIDDLE.

HTML:

<div class="row centered plan-container">
    <div class="col-sm-4 col-md-4 plan-col">
        <div class="smallBox">
             <h3>DEMO 1</h3>

        </div>
        <div class="bigBox">
            <button>SELECT</button>
        </div>
    </div>
    <div class="col-sm-4 col-md-4 plan-col">
        <div class="smallBox">
             <h3>DEMO 2</h3>

        </div>
        <div class="bigBox">
            <button>SELECT</button>
        </div>
    </div>
</div>

JQUERY:

$(".bigBox button").click(function () {
    var buttonsArray = $(".bigBox button");
    for (var i = 0; i < buttonsArray.length; i++) {
        $(buttonsArray[i]).css("background-color", "#1c1d20");
    }
    var parent = $(this).parent().parent();

    $(this).css("background-color", "#2eb5aa");


    var parents = $(".plan-col");
    for (var i = 0; i < parents.length; i++) {
        $(parents[i]).removeClass("up").addClass("down");
    }


    $(parent).addClass("up");
});

CSS:

.plan-container {
    text-align: center;
    max-width: 1000px;
    position:relative;
    margin: 0 auto;
    top: 50px;
}

.smallBox {
    height: 150px;
    border: 1px solid #2e2f3c;
}
.bigBox {
    height: 400px;
    border: 1px solid #2e2f3c;
}

.bigBox button {
    position: relative;
    top: 50px;
    padding: 10px 55px;
    border-radius: 50px;
    border: 3px solid #2eb5aa;
    background-color: #1c1d20;
    color: white;
    outline:0;
}
.up {
    bottom:30px;
}
.down {
    up:30px;
}
.col-plan {
    -webkit-transition: all 1s ease;
}

Upvotes: 1

Views: 101

Answers (2)

Alex
Alex

Reputation: 2062

After a good sleep I came up with the right solution I was looking for. For those who are interested, here is the js code that handles the animation:

var parents = $(".selected");
for(var i=0;i<parents.length;i++){
    $(parents[i]).animate({
    'marginTop' : "+0px" //moves down
    },{queue: false});
    $(parents[i]).removeClass("selected");
}

var parent = $(this).parent().parent();
$(parent).addClass("selected");

$(parent).animate({
    'marginTop' : "-30px" //moves up
    },{queue: false});

Fully functioning example here.

Upvotes: 1

Jonathan Lam
Jonathan Lam

Reputation: 17351

I made quite a few changes to your code as I tinkered a little bit, I'm afraid. But it works!

AFAIK, CSS3 Transitions only occur on an event, so you can't really do what you were trying to do (animate the styles of .col-plan from a different element, the<button>). So this uses jQuery to animate, which kind of deviates from your original intent to use CSS transitions. Sorry =(.

Here's what I changed:

  • the jQuery. Notice instead of changing classes, I used jQuery's animate(). The CSS transition does handle the timing, though, so you don't have to put in a length in ms. I also switched out the for loop for a jQuery each() function and removed extra $( ... )s.

       $(".bigBox button").click(function () {
    var buttonsArray = $(".bigBox button");
    for (var i = 0; i < buttonsArray.length; i++) {
        $(buttonsArray[i]).css("background-color", "#1c1d20");
    }
    var parent = $(this).parent().parent();
    $(this).css("background-color", "#2eb5aa");

    var parents = $(".col-plan");
    parents.each(function() {
        $(this).animate({"top": "0"});
    });

    parent.animate({"top": "auto", "bottom": "30px"});
});

  • the CSS:

    • .plan-col should be .col-plan. You have no .plan-col class in your code.
    • I removed the .up and .down classes, because they are only one style, and you can do that with jQuery. Also, as in the comments above, up should be top.

See working example on JSFiddle.net.

Upvotes: 1

Related Questions