Question

当我悬停图像时，连续更改三个不同的图像。但问题是：它只显示两个图像。第三张图片缺失。我该如何解决这个问题？

function changeimage(img_id)
{
    var prefix = "http://247nywebdesign.com/";
    prefix += "Testing/nurses-jewel/php/pdt_images/prdt_";
    $("#" + img_id).fadeOut(1500);
    $("#" + img_id).attr("src", prefix + "03.jpg").fadeIn(500);
    $("#" + img_id).attr("src", prefix + "03.jpg").show(4000);
    $("#" + img_id).attr("src", prefix + "05.jpg").fadeIn(500);
    $("#" + img_id).attr("src", prefix + "05.jpg").fadeIn(2000);
    $("#" + img_id).attr("src", prefix + "05.jpg").show(4000);
    $("#" + img_id).attr("src", prefix + "05.jpg").fadeOut(1500);
    $("#" + img_id).attr("src", prefix + "03.jpg").fadeIn(1000);
}

http://jsfiddle.net/L7Pcx/4/

Answer 1

检查此项并标记您是否认为这与预期相同。

以上图片仅供参考。使用最后一个图像进行悬停测试。

http://jsbin.com/towib/

Answer 2

您需要排队所有操作

$("#"+img_id)
  .fadeOut(1500)
  .queue(function(next) { $(this).attr("src","http://247nywebdesign.com/Testing/nurses-jewel/php/pdt_images/prdt_03.jpg"); next(); })   
  .fadeIn(500)
  // ...

Answer 3

在第一个fadein效果结束时传递它，如;

    $("#"+img_id).attr("src","http://247nywebdesign.com/Testing/nurses-jewel/php/pdt_images/prdt_03.jpg").fadeIn(500, 
    function () {
          $("#"+img_id).attr("src","http://247nywebdesign.com/Testing/nurses-jewel/php/pdt_images/prdt_03.jpg").show(4000);
    }
});

此致

交换多个鼠标图像

3 个答案: