2

我正在使用 jQuery UI 制作滑动 div，但我遇到了问题。

我有一个外部 DIV 和 2 个内部 DIV，它们是浮动的。在第一个内部 DIV 上，我有滑动效果。

<div id="outer">
    Outer Div
    <p><a href="#" id="SlideOut">Slide Out</a></p>
    <p><a href="#" id="SlideIn">Slide In</a></p>

    <div id="inner">inner</div>
    <div id="inner2">inner2</div>
</div>

    $("#SlideOut").click(function(){
    $("#inner").hide("slide",{direction: 'left'},1000);
});

$("#SlideIn").click(function(){
        $("#inner").show("slide",{direction: 'left'},1000);

});

问题是第二个 DIV 不跟随第一个 div。

很难解释，所以这里有一个小提琴，你可以更好地理解我的问题。 http://jsfiddle.net/xFx26/1/

简而言之，我希望第二个内部 div 将与第一个内部 div 一起滑动。

4

4 回答 4

4

您应该使用animate()和更改宽度，而不是滑动。幻灯片滑动内容，然后隐藏实际容器。更新了小提琴。

代码：

$("#SlideOut").click(function(){
    $("#inner").animate({width: 0},1000);
});

$("#SlideIn").click(function(){
     $("#inner").animate({width: 200},1000);
});
于 2013-02-08T17:12:30.817 回答
0

我想你需要像下面这样将 inner2 添加到你的 jquery 中？这是你想要的吗？

$("#SlideOut").click(function(){
$("#inner").hide("slide",{direction: 'left'},1000);
$("#inner2").hide("slide",{direction: 'left'},1000);
});

$("#SlideIn").click(function(){
    $("#inner").show("slide",{direction: 'left'},1000);
$("#inner2").show("slide",{direction: 'left'},1000);

});
于 2013-02-08T17:12:30.957 回答
0

在幻灯片中添加它（在幻灯片中添加相反的内容）

    $("#inner2").css("position","relative").animate({left:-200},990,function()  {$(this).css("left","")});

但更好的是把 position:relative 放在 css 中并从 js 中删除

于 2013-02-08T17:12:50.990 回答
0

你应该使用animate让你的 div 从右向左移动。

$("#SlideOut").click(function () {
    $("#inner").hide("slide", {
        direction: 'left'
    }, 1000);
    $("#inner2").animate({
        marginLeft: "-=250px",
    }, 1000);
});

http://jsfiddle.net/xFx26/5/点击SlideOut

于 2013-02-08T17:18:15.640 回答