-2

我有以下代码：

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

每 3 个版本有 2 个图像，它们会在悬停和单击时更改。如果您单击其他图像。它工作正常，但图像立即改变。任何人都可以重写图像淡入淡出或淡入淡出的代码，只是图像在更改时是“动画”的。

谢谢

4

2 回答 2

0

嗯，也许是这样的：

$(this).fadeOut().attr("src", "the_path").fadeIn();

我没有测试过，但试一试

于 2013-07-02T16:22:22.453 回答
0

正如他们告诉您的那样，您可以使用fadeInand来模拟过渡fadeOut，尽管它不是图像之间的真正过渡，因为它仅隐藏一个并显示另一个，而图像之间没有任何真正的过渡，但具有背景：

$(this).fadeOut('slow', function(){
     $(this).attr('src', 'YOUR_PATH').fadeIn();
});

活生生的例子：http: //jsfiddle.net/8hLMB/

于 2013-07-02T16:32:59.160 回答