将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。 有什么建议吗？     

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）