0

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

从一个图像淡入/淡出到另一个图像，图像的变化看起来要好得多。但是我怎样才能解决图像的每次变化都以淡入/淡出的方式显示？

这是我的代码顺便说一句

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

1 回答 1

0

你的 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");
});

这只是开始，因为如果您在鼠标进入后快速离开鼠标，淡入淡出将继续发生。希望这足以让您入门。

于 2013-07-01T17:26:22.267 回答