У меня есть изображение с изображением. Например:
<img id='imageWord' src=images\Card.png onclick='changeImage();'>
Когда пользователь нажимает на него , я хочу сделать fadeOut , изменить его источник на другое изображение, а затем fadeIn .
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 fadeOut.
- Нет изображения (0,1 секунды)
- Card.png снова (0,1 секунды).
- newImage.png fadeIn.
Я хочу избежать шага 3.
Любой совет?