幻灯片效果

Question

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

当我在右下角点击，我隐藏电流id，并显示下一个ID。

这工作很好，但我想ti做到这一点上的效果幻灯片。

，所以这是我的代码，当我点击右下角

$('#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); 
} 

如果我erease（幻灯片...）上AlaDerecha功能这样

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

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

任何想法！

感谢

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