Jquery 每个图像都会随着淡入/淡出而变化

我有一个jQuery代码。该网站包含2个图像，每个图像有3个版本。1个默认值，1个悬停，1个单击。单击后，图像将一直保留，直到单击另一个图像，然后返回到版本1。jQuery代码使用不同的if语句和条件修复了这个问题

---

从一个图像淡入/淡出到另一个图像时，图像的变化看起来更好。但是，如何修复图像的每次更改都以淡入/淡出方式显示

---

这是我的代码顺便说一句

JS:

---

var=false；
var-klick=false；
$（“img#hovertom”）。单击（函数（）{
如果（单击）单击=真；
else$（this.attr（“src”，”./img/tom_effects.png）；
if（clicked=true）$（this.attr（“src”，”./img/tom_effects.png）；
if（clicked=true）$（“img#hoverdaniel”）.attr（“src”，”./img/daniel.png”）；
如果（clicked=true）klick=false；
});    
$（“img#hovertom”）.hover（函数（）{
如果（！clicked）$（this.attr（“src”，“./img/tom_hover.png”）；
}，函数（）{
如果（！clicked）$（this.attr（“src”，“./img/tom.png”）；
});
$（“img”）单击（函数（）{
如果（klick）klick=true；
else$（this.attr（“src”，“./img/daniel_effects.png”）；
if（klick=true）$（this.attr（“src”，”./img/daniel_effects.png）；
if（klick=true）$（“img#hovertom”）.attr（“src”，”./img/tom.png”）；
如果（klick=true）单击=false；
});
$（“img#hover”）.hover（函数（）{
if（！klick）$（this.attr（“src”，”./img/daniel_hover.png）；
}，函数（）{
如果（！klick）$（this.attr（“src”，“./img/daniel.png”）；
});

HTML:

CSS:

#hovertom{
浮动：左；
光标：指针；
}
#哈弗丹尼尔{
浮动：对；
光标：指针；
}

您的if语句总是正确的。将

if（klick=true）

更改为

if（klick）

并将

if（clicked=true）

更改为

if（clicked）

---

现在，每次尝试检查值时，您都将

klick

和

单击

设置为

true

---

对于淡入和淡出：

var fadeImage = function(el, to) {
    var img = $(el);
    // get the offset of the original image
    var offset = img.offset();
    // clone the original image, position it absolutely, and fade
    var oldImg = img.clone().css(offset).appendTo('body')
        .fadeTo(400, 0, function() {
            oldImg.remove();
        });
    // change the image to the new source.
    img.attr('src', to);
};

$("img#hovertom").hover(function () {
    if (!clicked) fadeImage(this, "../img/tom_hover.png");
}, function () {
    if (!clicked) fadeImage(this, "../img/tom.png");
});

---

这仅仅是一个开始，因为如果你在鼠标移动后很快离开鼠标，褪色将继续发生。希望这足够让你开始了。

请分享你的html和css代码#hovertom{float:left；cursor:pointer；}#hoverdaniel{float:right；cursor:pointer；}我已经把代码放在了我的.js中，但是淡入的img出现在页面上的一个随机位置，而不是之前的img的位置……是随机的吗，还是每次都在同一个地方？图片上有空白吗？偏移量获取相对于文档的位置，但不考虑边距、边框或填充。不是随机的，但我想我不知道如何在代码中添加淡入。代码现在是：