内容上的幻灯片效果答案

【问题标题】：slide effect on content内容上的幻灯片效果
【发布时间】：2013-03-05 02:25:42
【问题描述】：

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

点击右下角，隐藏当前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();
}

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

任何想法！

谢谢

【问题讨论】：

标签： jquery jquery-ui

【解决方案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);
    });
}

【讨论】：