鼠标悬停时更改多个图像问题

Question

我无法在鼠标悬停时更改多个图像。我尝试了下面的功能来更改鼠标悬停时的图像，但效果不佳。在 Onmouseover 事件中，第一个图像慢慢淡出，然后第二个图像平滑淡入。几秒钟后，第二张图像慢慢淡出，第三张图像平滑淡入。

function changeimage(img_id)
{
setTimeout(function(){ $("#"+img_id).attr("src","http://247nywebdesign.com/Testing/nurses-jewel/php/pdt_images/prdt_03.jpg").show(); }, 5000);
    $("#"+img_id).attr("src","http://247nywebdesign.com/Testing/nurses-jewel/php/pdt_images/prdt_05.jpg").fadeIn(5000);
    setTimeout(function(){ $("#"+img_id).attr("src","http://247nywebdesign.com/Testing/nurses-jewel/php/pdt_images/prdt_05.jpg").show(); }, 5000);
    $("#"+img_id).attr("src","http://247nywebdesign.com/Testing/nurses-jewel/php/pdt_images/prdt_05.jpg").fadeOut(5500);
}

Jsfiddle 链接：

http://jsfiddle.net/XVz95/3/

Answer 1

我让你的 jsfiddle 链接正常工作：

function changeimage(img_id)
{
setTimeout(function(){ $("#"+img_id).attr("src","http://247nywebdesign.com/Testing/nurses-jewel/php/pdt_images/prdt_03.jpg").show(); }, 5000);
    $("#"+img_id).attr("src","http://247nywebdesign.com/Testing/nurses-jewel/php/pdt_images/prdt_05.jpg").fadeIn(5000);
    setTimeout(function(){ $("#"+img_id).attr("src","http://247nywebdesign.com/Testing/nurses-jewel/php/pdt_images/prdt_05.jpg").show(); }, 5000);
    $("#"+img_id).attr("src","http://247nywebdesign.com/Testing/nurses-jewel/php/pdt_images/prdt_05.jpg").fadeOut(5500);
}

http://jsfiddle.net/XVz95/4/

Answer 2

你可以在 jQuery 中这样做

标记：

 <div id="pdtimg_1">
     <img src="http://247nywebdesign.com/Testing/nurses-jewel/php/pdt_images/prdt_03.jpg"/>
    <img src="http://247nywebdesign.com/Testing/nurses-jewel/php/pdt_images/prdt_05.jpg" style="display: none;"/>
</div>

javascript：

$( document ).ready(function() {
    $('#pdtimg_1').mouseover(function(){
        $(this).find('img:first').hide();
        $(this).find('img:last').show();
    });

    $('#pdtimg_1').mouseout(function(){
        $(this).find('img:first').show();
        $(this).find('img:last').hide();
    });
});

http://jsfiddle.net/CabK3/

-----------------------更新----------- --------

$( document ).ready(function() {
$('#pdtimg_1').mouseover(function(){
    var elem  = $(this);
    elem.find('img:first').fadeOut(5000, function() {
        elem.find('img:nth-child(2)').fadeIn(5000, function() {
             elem.find('img:nth-child(2)').fadeOut(5000); 
            elem.find('img:last').fadeIn(5000);
        });
    });


});

});

和

<div id="pdtimg_1">
<img src="http://247nywebdesign.com/Testing/nurses-jewel/php/pdt_images/men-wedding-rings.jpg"/>

<img src="http://247nywebdesign.com/Testing/nurses-jewel/php/pdt_images/prdt_03.jpg" style="display: none;"/>
    <img src="http://247nywebdesign.com/Testing/nurses-jewel/php/pdt_images/prdt_05.jpg" style="display: none;"/>

Answer 3

这就是你想要的吗？它允许一系列图像源，以防您需要添加更多图片：

function changeImage(img) {
    var imgSrcArr = [];
    imgSrcArr.push("http://247nywebdesign.com/Testing/nurses-jewel/php/pdt_images/men-wedding-rings.jpg");
    imgSrcArr.push("http://247nywebdesign.com/Testing/nurses-jewel/php/pdt_images/prdt_03.jpg");
    imgSrcArr.push("http://247nywebdesign.com/Testing/nurses-jewel/php/pdt_images/prdt_05.jpg");

    $img = $(img);
    if ($img.is(":visible")) {
        $img.fadeOut(5500, function() {
            var i = imgSrcArr.indexOf($(this).attr("src"));
            i = i+1 >= imgSrcArr.length ? 0 : i+1;
            $(this).attr("src", imgSrcArr[i]).on('load', function() {$(this).fadeIn(5000)})
        });
    } else {
        $img.fadeIn(5000);  
    }
}

$("#pdtimg_1").mouseenter(function() {changeImage(this)});

jsFiddle example