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

Question

我的页面有一部分包含 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;});
    }
});
});

Answer 1

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

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