Javascript / Jquery幻灯片效果发生在错误的地方

时间:2013-01-16 23:55:55

标签: javascript jquery css

我的页面的一部分包含了Jquery幻灯片效果,但是应该滑入原始位置的div滑动得太低,然后只是弹出到位。我不太确定它为什么会这样。如何将新的div幻灯片放在与原始div相同的平面上?下面是我的JS以及一个小提琴的链接,所以你可以看到我的意思。谢谢!

http://jsfiddle.net/vYDqC/

$(document).ready(function() {
$("#content div").hide();
$("#tabs li:first").attr("id","current");
$("#content div:first").effect("slide", 800);
var animating = false;
$('#tabs a').click(function(e) {
    e.preventDefault();
    if ($(this).closest("li").attr("id") == "current"){
    return;       
    }
    else{
        if(!animating)             
            $("#content div").hide("slide", {direction: "right"}, 800, function() { animating = true; });
            $("#tabs li").attr("id","");
            $(this).parent().attr("id","current");
            $('#' + $(this).attr('name')).show("slide", {direction: "left"}, 800, function() { animating = false;});
    }
});
});

1 个答案:

答案 0 :(得分:2)

我在使用jQuery的幻灯片效果之前遇到过这个问题。尝试将position: absolute添加到.con课程。然后,您需要为其添加width: 100%以填写父div。

http://jsfiddle.net/vYDqC/2/