将imsg src从一个更改为另一个表示“轻弹”

如何解决将imsg src从一个更改为另一个表示“轻弹”

| 我有一张图片的img元素。例如：

<img id=\'imageWord\' src=images\\Card.png onclick=\'changeImage();\'>

当用户单击它时，我要进行一个淡出，将其src更改为另一张图像，然后淡出。

function changeImage()
{
    $(\'#ImageWord\').animate({opacity:0})
    .queue(function(){
         $(this).attr(\"src\",\'\');
         replaceImage(\'#ImageWord\',\'images\\newImage.png\');
         $(this).dequeue()
    })
    .animate({opacity:1}); 
}

var MAX_HEIGHT = 260;
var MAX_WIDTH = 260;

    function keepAspectRatio(temp,target,url)
    {
        $(target).removeAttr(\'style\');

        // Get height and width once loaded
        var realHeight = temp.height;
        var realWidth = temp.width;

        // Get how much to divide by (1 if image fits in dimensions)
        // Get rid of \",1\" if you just want everything to be either
        // MAX_HEIGHT tall or MAX_WIDTH wide
        var factor = Math.max(realHeight/MAX_HEIGHT,realWidth/MAX_WIDTH,1);
        realHeight /= factor;
        realWidth /= factor;

        // Set the target image\'s source,height and width
        $(target).attr(\"src\",url).css({height: realHeight,width: realWidth});

        if (realWidth != MAX_WIDTH)
        {
            var offsetX = (MAX_WIDTH - realWidth ) / 2;
            var sum = parseFloat($(target).css(\"left\").replace(\"px\",\"\")) + offsetX;
            $(target).css(\"left\",sum);
        }
        if (realHeight != MAX_HEIGHT)
        {
            var offsetY = (MAX_HEIGHT - realHeight) / 2;
            var sum = parseFloat($(target).css(\"top\").replace(\"px\",\"\")) + offsetY;
            $(target).css(\"top\",sum);
        }
    }

    function replaceImage($target,url) {
      $(\"<img>\").load(function() {
        keepAspectRatio(this,$target,url);
      }).attr(\"src\",url);
    }

有时我看到以下内容： Card.png淡出。 无图像（0.1秒） 再次使用Card.png（0.1秒）。 newImage.png fadeIn。 我想避免步骤3。 有什么建议吗？     

解决方法

        如本例所示，您可以在开始时将所有图像都不显示。比起使用jQuery fadeIn和fadeOut来显示正确的图像。您所需要做的就是将它们放置在position：relative div并将它们定义为position：absolute：

<div class=\"slideshow\" style=\"position: relative; \">
    <img src=\"http://cloud.github.com/downloads/malsup/cycle/beach1.jpg\" width=\"200\" height=\"200\" style=\"position: absolute; top: 0px; left: 0px; width: 200px; height: 200px; z-index: 5; opacity: 0; display: none; \">
    <img src=\"http://cloud.github.com/downloads/malsup/cycle/beach2.jpg\" width=\"200\" height=\"200\" style=\"position: absolute; top: 0px; left: 0px; width: 200px; height: 200px; z-index: 5; opacity: 0; display: none; \">
    <img src=\"http://cloud.github.com/downloads/malsup/cycle/beach3.jpg\" width=\"200\" height=\"200\" style=\"position: absolute; z-index: 6; top: 0px; left: 0px; display: block; width: 200px; height: 200px; opacity: 1; \">
    <img src=\"http://cloud.github.com/downloads/malsup/cycle/beach4.jpg\" width=\"200\" height=\"200\" style=\"position: absolute; top: 0px; left: 0px; width: 200px; height: 200px; z-index: 5; opacity: 0; display: none; \">
    <img src=\"http://cloud.github.com/downloads/malsup/cycle/beach5.jpg\" width=\"200\" height=\"200\" style=\"position: absolute; top: 0px; left: 0px; width: 200px; height: 200px; z-index: 5; opacity: 0; display: none; \">
</div>

http://jquery.malsup.com/cycle/basic.html     ,        假设您要显示2张以上的图片（以幻灯片形式显示），您可以尝试使用两张图片，一张在另一张上。一个是您实际显示的图像，另一个是您需要在第一个淡出时显示的图像。 这样，您可以淡出第一个，显示最下面的一个。当淡入淡出动画结束时，您可以将其（回调）放在另一个动画的下面，并更改其src。在后台加载时不会闪烁。 如果只有2张图像，则褪色足以在图像之间循环。 可能解决您问题的另一种解决方案是预加载图像并将其存储在缓存中。如果我没记错，那就可以解决问题。 抱歉，我没有提供代码，但是我正在上班...。如果您需要更多详细信息，请告诉我。