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绑定。

javascript，用动画改变图像

1 个答案: