Блог

Итак, я использую jQuery для изменения значков и использую CSS для применения перехода. По какой-то причине это не работает, вот мой код

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'); 
});
  

Демонстрация http://jsfiddle.net/cLVBg/1 / Есть идеи?

content не является анимируемым свойством, следовательно transition , не применяется. Однако, если вы просто хотите заполнить сердце переходом по непрозрачности, попробуйте поработать с сердцем, созданным в SVG или CSS, или просто поместите одно сердце поверх другого и измените их значение непрозрачности.

Пример:http://jsfiddle.net/cLVBg/5 /

То, что вы делаете сейчас, — это замена содержимого при наведении курсора мыши. Если вы хотите медленный переход, вы можете использовать свойства CSS для достижения этого, например:

Пример JSFiddle

HTML:

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

CSS:

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

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

transition Свойство требует, чтобы вы объявили другое свойство, к которому будет применяться переход. Вы можете выбрать продолжительность, функцию синхронизации перехода ( ease в данном случае) и задержку, если хотите.