JQUERY在图像变化时创建滑动效果(JQUERY Creating a sliding effect while image is changing)

我有三个图像1.jpg，2.jpg，3.jpg＆ <img id="add" src="1.jpg"></img>此图像的宽度，高度和位置根据需要设置和工作精细。我已应用JQUERY淡入淡出属性在上面的图像之间切换，它也工作正常。

但我确切地想要图像以滑动方式改变，即1.jpg向左滑动并消失并在2.jpg中拖动其位置等等在特定间隔中继续。

希望我很清楚......

问候。

I have three images 1.jpg,2.jpg,3.jpg & <img id="add" src="1.jpg"></img> the width , Height & position of this image is set as required & working fine. I have applied JQUERY fade property to toggle between the above images & its also working fine.

But I want precisely that the images change in sliding fashion, i.e. 1.jpg slides left and vanishes and drags in 2.jpg in its position & so on continues in specific interval.

Hope I am clear...

Regards.

最满意答案

Yhank大家为你的努力，但是，我自己配置了...这是它的工作原理：

index.html的：

slide.js

$("document").ready(function(){ var img_l=$("#pic1"); var img_r=$("#pic2"); setInterval(function(){ img_l.animate({width:'160px'},1000);; //animating the image t colapse img_r.animate({width:'0px'},1000);; //animating the image t expand var temp_var=img_l; //swaping values to revert previous action img_l=img_r; img_r=temp_var; },3000); //repeating the effect every 3 seconds });

这符合我的要求，并且在所有主流浏览器中具有完全相同的行为......谢谢。

Yhank You everyone for your efforts, But , I configured it myself... Here is how it worked:

index.html:

slide.js

$("document").ready(function(){ var img_l=$("#pic1"); var img_r=$("#pic2"); setInterval(function(){ img_l.animate({width:'160px'},1000);; //animating the image t colapse img_r.animate({width:'0px'},1000);; //animating the image t expand var temp_var=img_l; //swaping values to revert previous action img_l=img_r; img_r=temp_var; },3000); //repeating the effect every 3 seconds });

This is doing well with my requirements and has exactly same behaviour within all leading browsers... Thanks.

更多推荐