幻灯片效果
问题描述:
大家好我试图隐藏和显示我的模态窗口的内容的同时,幻灯片效果
当我在右下角点击,我隐藏电流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下一个项目不显示它。
任何想法!
感谢
答
的第一件事,不要使用.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);
});
}