对内容的滑动效果

Question

大家好，我试图同时隐藏和显示模态窗口的内容，

当我单击右下角时，我将隐藏当前ID，并显示下一个ID。

这项工作很好，但我想在此上做效果幻灯片。

所以这是我单击右下角时的代码

$('#right').live('click', function(){
    var total=$('.elemento').length;
    var siguiente= parseInt(actual) +1;
    if (siguiente <= total){
        AlaDerecha(sig);

    }
});

和

function AlaDerecha(sig){
    previo = actual;
    actual = sig;
    $("[data-item ="+ previo + "]").hide("slide", { direction: "left" }, 1000);
    $("[data-item ="+ actual + "]").show("slide", { direction: "right" }, 1000);
}

如果我像这样在AlaDerecha函数上增加（滑动...）

function AlaDerecha(sig){
    previo = actual;
    actual = sig;
    $("[data-item ="+ previo + "]").hide();
    $("[data-item ="+ actual + "]").show();
}

它工作正常，隐藏当前项目并显示下一个项目，但是如果我放幻灯片效果，则当前项目向左移动但没有隐藏，而下一个项目则不显示它。

任何想法！

谢谢

Answer 1

首先，不要使用.live() ，因为它已被弃用，并且会在浏览器之间产生不需要的结果。 通过以下方式更改代码：

$('body').on('click', '#right', function(){
    var total=$('.elemento').length;
    var siguiente= parseInt(actual) +1;
    if (siguiente <= total){
        AlaDerecha(sig);
    }
});

为了使幻灯片正常工作，请使用回调函数。

function AlaDerecha(sig){
    previo = actual;
    actual = sig;
    $("[data-item ="+ previo + "]").hide("slide", { direction: "left" }, 1000, function(){
        $("[data-item ="+ actual + "]").show("slide", { direction: "right" }, 1000);
    });
}