jQuery .toggleClass() 转换

Question

我正在编写一个 jQuery 脚本，使用 .toggleClass() 更改悬停时 img 的不透明度 该类的 css 是:

.img-hover{
    opacity: 0.5;
    transition: opacity 1s;
}

问题是当我移除鼠标时，我希望它转换回原来的不透明度，但由于切换类，它突然发生，我的代码是

$(document).ready(function () {
    $(".port-item-img").hover(function () {
        $(this).toggleClass('img-hover');
    });
});

有什么想法吗？

我知道这一切都可以用 css 自己完成，但我正在努力插入自己使用 jQuery 学习新东西，因为我对它很陌生并且喜欢挑战

Answer 1

仅使用 jQuery 的解决方案(无需额外的 CSS 样式)。

.animate()提供元素的动画，并且.stop()用于在添加新动画之前停止当前动画(如果仍在处理中)。

JSFiddle .

$(document).ready(function()
{
    $(".port-item-img").hover
    (
        function()
        {
            $(this).stop().animate({ opacity: 0.5 }, 1000);
        },
        function()
        {
            $(this).stop().animate({ opacity: 1 }, 1000);
        }
    );
});