JavaScript，使用动画更改图像

Question

我有一个页面，在屏幕中央有一个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');
}

目前，图像在移至左侧之前发生了变化。 然后它消失了。 我希望第一张图像移动，淡出，然后第二张图像从右侧出现。 你能帮助我吗？ 谢谢

Answer 1

$("#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绑定。