CODEWITHSUNDEEP
jqueryhtmlcsstwitter-bootstrap
Greg
Greg

Reputation: 1402

Icon rotates but goes back to previous position

I'm using Bootstraps accordion element and when it opens I want to rotate the icon. I use jQuery to check if it's collapsed or not (so other elements would close) and right then I want to rotate the icon. I add a class using jQuery that rotates the icon (which works) but it jumps back to how it was before:

.cross_up{
        background:url(../img/cross.png) center center;
        transition: all 0.20s ease;
    }

    .cross_down{
        transition: all 0.20s ease;
        transform:rotate(45deg);
        animation-fill-mode:forwards;
    }

HTML

<span class="cross_up"> </span>Verzekeringen

jQuery

$('.collapse').on('shown.bs.collapse', function(){
    $(this).parent().find(".cross_up").addClass("cross_down");
}).on('hidden.bs.collapse', function(){
    $(this).parent().find(".cross_down").removeClass("cross_down");
});

Working link here

Upvotes: 1

Views: 42

Answers (1)

Asim K T
Asim K T

Reputation: 18144

I think its because of background you are trying to rotate. You should try to rotate the whole span.

<span class= "cross_down">
<span class="cross_up"> </span> 
</span>
Verzekeringen

Refer link if you want to apply css transform on background images.

http://www.sitepoint.com/css3-transform-background-image/

Upvotes: 2

Related Questions