0

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

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

4

1 回答 1

0 
$("#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.

于 2013-09-23T12:41:40.333 回答