JavaScript，用动画改变图像

javascript, changing image with animation

本文关键字：改变 图像 动画 JavaScript      更新时间：2023-09-26

我有一个页面，在屏幕中央有一个div，下面有几个链接。单击每个链接时，必须在div 中显示不同的图像。单击链接时，当前图像必须移动到屏幕左侧并淡出，同时新图像必须从右侧淡入淡出并放置在div 中。到目前为止，我所做的是在以下脚本中，在每个链接上调用 

OnClick=("changeImage('name')")

function changeImage(param){
var image = $("#div");
image.animate({"queue": true, opacity: 0.0, right: '650px'}, 1200);
image.attr('src', 'img/'+param+'.png');
}

目前，图像在向左移动之前会发生变化。然后它消失了。我希望第一个图像移动，淡出，然后第二个图像从右边出现。你可以帮我吗？谢谢

$("#div").click(function(){
    var image = $(this);
    var param = 'example';
    image.animate({opacity: 0.0, right: '1000px'}, 1200).delay(100).animate({opacity: 1, right: '200px'}, 1200);
    setTimeout(function(){ image.attr('src', 'img/'+param+'.png').css('right','-1000px'); },1200);
});

小提琴：http://jsfiddle.net/nKpqU/

jQuery的效果queue仅适用于：效果和动画。我还更改了您的onclick设置，以将click事件与jQuery的.click绑定。

相关文章：