将淡入淡出更改为幻灯片

Question

如何将淡入淡出更改为左/右滑动？

 changeList = function () {

            listItems.eq(i).fadeOut(transition_speed, function () {
                i += 1;
                if (i === listLen) {
                    i = 0;
                }
                listItems.eq(i).fadeIn(transition_speed);
            });

        };

我找到了一个代码;但是，不知道如何实现，因为第一部分（淡出）附加了一个功能。

.show( "slide", {direction: "left" }, 2000 );

然后

.hide( "slide", {direction: "left" }, 2000 );

是实现这一目标的最佳方式，还是有更好的方法？

------ ------ EDIT

        changeList = function () {

            listItems.eq(i).hide({
    easing : "slide",
    direction: "left",
    duration : 2000,
    complete: function(){
        i += 1;
                if (i === listLen) {
                    i = 0;
                }
                listItems.eq(i).show({
    easing : "slide",
    direction: "left",
    duration : 2000 });
    }
            });
};

此修改无效。我可能实现了错误

Answer 1

你可以在没有jQuery UI的情况下完成。

使用.animate({ width: property }, 2000);

属性：

• 0 - 隐藏
• 200px - 显示尺寸为200px
• ＆＃39;肘节＆＃39; - 切换

参考：jQuery API Animate

Answer 2

使用此切换效果

$("#left_panel").toggle("slide", { direction: "left" }, 1000);

我已经编辑过了。

$('a.view-list-item').click(function () {
    var divname= this.name;
    $("#"+divname).show("slide", { direction: "left" }, 1000);
    $("#"+divname).parent().siblings(":visible").hide("slide", { direction: "left" }, 1000);
});