Question

所以我使用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/有什么想法吗？

Answer 1

content不是animatable property，因此transition不适用。但是，如果您只想填充不透明度的过渡，请尝试使用SVG - 或CSS-创建的心脏，或者只将一个放在另一个上面并更改其不透明度值。< / p>

示例：http://jsfiddle.net/cLVBg/5/

Answer 2

您现在正在做的是替换悬停时的内容。如果您想要一个缓慢的过渡，您可以使用CSS属性来实现这一点，如下所示：

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

transition属性要求您声明另一个属性以应用转换。您可以选择持续时间，转换计时功能（在这种情况下为ease），如果需要，还可以选择延迟。

过渡不适用

2 个答案: