CODEWITHSUNDEEP
javascriptjqueryhtmlcss
user2300867
user2300867

Reputation: 603

css transitions not working on firefox

I have a similar issue as CSS Transition not firing when adding class to body (Firefox) but I can seem to find a way to solve it targeting the element in different ways or removing classes.

Here is what I have:

Markup:

                <div class="ball b40 first">
                    <a class="ffx-fx" href="javascript:void(0)">

                    </a>
                </div>

css:

.ffx-fx {
-webkit-transition: all 1.5s ease-in-out; 
   -moz-transition: all 1.5s ease-in-out;
     -o-transition: all 1.5s ease-in-out;
    -ms-transition: all 1.5s ease-in-out;
        transition: all 1.5s ease-in-out;
}
.b40 a          {
width:220px;
height:220px; 
background: url(../images/temp/1_a.jpg) center center; 
background-size: 100% 100% !important;

}

.b40 .b40-rotated {
width:220px;
height:220px; 
background: url(../images/temp/1_b.jpg) center center !important;

}

js: 

window.setInterval(function() {
   $( ".b40 .ffx-fx" ).toggleClass( "b40-rotated" );
}, 5000);

Upvotes: 0

Views: 189

Answers (1)

cbloss793
cbloss793

Reputation: 1649

I don't believe you can switch out background-images with transitions. At least I haven't tried it. How I usually handle this situation is have two inner divs--one with the on hover class and one with the off class. Then on hover, I change opacity. Opacity transition works. Sooo something like this...

HTML

<div class="container">
  <a href="">
   <div class="off_state"></div>
   <div class="on_state"></div>
 </a>
</div>

CSS

.container{position:relative;}
.off_state, .on_state{
    position:absolute;
    top:0;
    left:0;
    transition: all 1s;
}
.off_state, .container:hover .on_state{opacity:0.0;filter:alpha(opacity=0);}
.container:hover .on_state{opacity:1.0;filter:alpha(opacity=100);}

It's a rough version, but that's how I've always done it.

NOTE: jQuery UI also has the ability to add a class slowly. You can view it here: http://jqueryui.com/addClass/. It would probably be easier to use.

Upvotes: 2

Related Questions