Question

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

从一个图像到另一个图像的淡入/淡出，从图像的变化看起来更好。但是，如何确定每次从图像中更改都会显示淡入/淡出？

这是我的代码btw

JS：

var clicked = false;
var klick = false;

$("img#hovertom").click(function () {
    if (clicked) clicked = true;
    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");
    if (clicked = true) klick = false;
});    

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

$("img#hoverdaniel").click(function () {
    if (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");
    if (klick = true) clicked = false;
});

$("img#hoverdaniel").hover(function () {
    if (!klick) $(this).attr("src", "../img/daniel_hover.png");
}, function () {
    if (!klick) $(this).attr("src", "../img/daniel.png");
});

HTML：

<img src="../img/tom.png" alt="tom" width="450" height="450" class="clicktom" id="hovertom">
<img src="../img/daniel.png" alt="daniel" width="450" height="450" class="hover3" id="hoverdaniel">

CSS：

#hovertom{
  float: left;
  cursor: pointer;
}

#hoverdaniel{
  float: right;
  cursor: pointer;
}

Answer 1

你的if语句总是正确的。将if (klick = true)更改为if (klick)，将if (clicked = true)更改为if (clicked)。

目前，每次尝试检查值时，您都会将klick和clicked设置为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");
});

这也是一个开始，因为如果你在鼠标中心后快速鼠标移动，褪色将继续发生。希望它足以让你开始。

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

1 个答案: