Question

我有以下代码：

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张图片，它们会在悬停和点击时更改。如果您单击其他图像。它工作正常，但图像立即改变。任何人都可以重写图像淡出淡出或淡入淡出的代码，只需将图像更改为“动画”即可。

THX

Answer 1

mmm，可能是这样的：

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

我没有测试过，但试一试

Answer 2

正如他们告诉你的那样，你可以使用fadeIn和fadeOut来模拟过渡，虽然它不是图像之间的真正过渡，因为它只隐藏一个并显示其他图像之间没有任何真正的过渡但有背景：

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

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

jQuery：带有淡入淡出和淡出的图像（淡入淡出）

2 个答案: