jQuery.toggleClass（）转换

我正在编写一个jQuery脚本，使用

.toggleClass（）

更改悬停时img的不透明度该类的css是：

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

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

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

有什么想法吗

---

我知道这一切都可以通过css单独完成，但我正在努力推动自己通过jQuery学习新的东西，因为我对jQuery还很陌生，我喜欢挑战，要让它变慢，你应该：

JS

$(document).ready(function() {
    $(".port-item-img").hover(function() {
        $(this).addClass('img-hover');
        $(this).removeClass('img-unhover');

    }, function() {
        $(this).removeClass('img-hover');
        $(this).addClass('img-unhover');

    });
});

.img-unhover{
    opacity: 1;
    transition: opacity 1s;
}

CSS

$(document).ready(function() {
    $(".port-item-img").hover(function() {
        $(this).addClass('img-hover');
        $(this).removeClass('img-unhover');

    }, function() {
        $(this).removeClass('img-hover');
        $(this).addClass('img-unhover');

    });
});

.img-unhover{
    opacity: 1;
    transition: opacity 1s;
}

---

问题可能是当类被删除时，

转换

属性也会丢失

jQuery（函数（$）{
$（“.port item img”）.hover（函数（）{
$（this.toggleClass（'img-hover'）；
});
});
.img悬停{
不透明度：0.5；
}
.港口项目img{
过渡：不透明度3s；
}

端口项img
端口项img
端口项img
仅使用jQuery的解决方案（没有附加的CSS样式）

提供元素的动画，并用于在添加新动画之前停止当前动画（如果仍在进行中）


令人惊叹的！甚至不需要css，我只使用了几天jQeury，我很喜欢它的功能@不客气。使用CSS3而不是JS有时是更合适的方式（工作速度更快等等），但如果您想要非常定制的东西，下面是JS和jQuery。是的：jQuery有很好的能力：）