JQUERY 在图像变化时创建滑动效果答案

【问题标题】：JQUERY Creating a sliding effect while image is changingJQUERY 在图像变化时创建滑动效果
【发布时间】：2014-03-05 21:21:51
【问题描述】：

我有三张图片 1.jpg,2.jpg,3.jpg 和 <img id="add" src="1.jpg"></img> 该图片的宽度、高度和位置已根据需要设置并且工作正常。我已经应用了 JQUERY 淡入淡出属性来在上述图像之间切换并且它也可以正常工作。

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

希望我清楚...

问候。

【问题讨论】：

分享你的尝试。

标签： javascript jquery css ajax html

【解决方案1】：

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

index.html:

<html>

<head>
    <script src="jquery.js"></script>
    <script src="slide.js"></script>
</head>

<body>
    <div >
        <img id="pic1" src="1.jpg"style="width:0px;height:120px;"/><img id="pic2" src="2.jpg" style="width:160px;height:120px;"/>
    </div>
</body>

</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
});

这很好地满足了我的要求，并且在所有领先的浏览器中具有完全相同的行为...... 谢谢。

【讨论】：