CODEWITHSUNDEEP
javascriptjqueryhtmlcss
user3537990
user3537990

Reputation:

Transition not applying

So I'm using jQuery to change icons, and using CSS to apply a transition. For some reason its not working Here's my code

CSS 

.fa-heart{
  transition: 1s;
}
.fa-heart-o{
  transition: 1s;
}

JS

$('.fa-heart-o').hover(function() {
     $(this).toggleClass('fa-heart-o fa-heart');   
}, function() {
     $(this).toggleClass('fa-heart-o fa-heart'); 
});

A demo http://jsfiddle.net/cLVBg/1/ Any ideas?

Upvotes: 0

Views: 79

Answers (2)

user3795913
user3795913

Reputation:

What you are doing now is replacing the content on hover. If you want a slow transition, you can use CSS properties to achieve that, like so:

JSFiddle Example

HTML:

<div id="transition"></div>

CSS:

#transition {
    width: 50px;
    height: 50px;
    background-color: blue;
}

#transition:hover {
    transition: background-color 1s ease;
    background-color: red;
}

The transition property requires that you declare another property to apply the transition to. You can select a duration, a transition timing function (ease, in this case), and a delay if you want.

Upvotes: 0

Derek 朕會功夫
Derek 朕會功夫

Reputation: 94299

content is not an animatable property, thus transition does not apply. However if you just want to fill in the heart with a transition in opacity, try working with a SVG- or CSS-created heart, or just place one on top of another and change their opacity value.

Example: http://jsfiddle.net/cLVBg/5/

Upvotes: 1

Related Questions