用于切换显示/隐藏侧边栏的 jQuery 插件

Question

您好，我这里有 3 个不同的 div。如何从左到右更改隐藏/显示 div 的动画？并在#framecontentLeft显示/隐藏时自动改变framecontentTop和maincontent的宽度？

查看此链接。这就是我想做的动画。 http://www.htmldrive.net/items/demo/1421/a-jQuery-plugin-for-toggle-showhide-sidebar

有什么帮助吗？

这是我的代码

<script type="text/javascript">
$(document).ready(function(){

        $("#framecontentLeft").hide();
        $(".show_hide").show();

    $('.show_hide').click(function(){
    $("#framecontentLeft").slideToggle();
    });

});
</script>
<style>
body{
    margin: 0;
    padding: 0;
    border: 0;
    overflow: hidden;
    height: 100%; 
    max-height: 100%; 
    }

    #framecontentLeft, #framecontentTop{
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 150px; /*Width of left frame div*/
    height: 100%;
    overflow: hidden; /*Disable scrollbars. Set to "scroll" to enable*/
    background-color: silver;
    color: white;
    }

    #framecontentTop{ 
    left: 150px; /*Set left value to WidthOfLeftFrameDiv*/
    right: 0;
    width: auto;
    height: 120px; /*Height of top frame div*/
    overflow: hidden; /*Disable scrollbars. Set to "scroll" to enable*/
    background: green;
    color: white;
    }

    #maincontent{
    position: fixed; 
    left: 150px; /*Set left value to WidthOfLeftFrameDiv*/
    top: 120px; /*Set top value to HeightOfTopFrameDiv*/
    right: 0;
    bottom: 0;
    overflow: auto; 
    }

    .innertube{
    margin: 15px; /*Margins for inner DIV inside each DIV (to provide padding)*/
    }

    * html body{ /*IE6 hack*/
    padding: 120px 0 0 200px; /*Set value to (HeightOfTopFrameDiv 0 0 WidthOfLeftFrameDiv)*/
    }

    * html #maincontent{ /*IE6 hack*/
    height: 100%; 
    width: 100%; 
    }

    * html #framecontentTop{ /*IE6 hack*/
    width: 100%;
    }

.show_hide {
    display:none;
}
</style>


<a href="#" class="show_hide">Show/hide</a>


<div id="framecontentLeft">
    <div class="innertube">
 <a href="#" class="show_hide">hide</a>
    </div>
    </div>

    <div id="framecontentTop">
    <div class="innertube">

    </div>
    </div>

    <div id="maincontent">
    <div class="innertube">

    </div>
    </div>

Answer 1

我刚刚为你创建了这个 jsfiddle。我试图尽可能多地包含你的代码，但我认为如果你有一个可以尝试的版本，它会对你有所帮助。

如您所见，您必须使用 jQuerys animate 函数来真正为 div 滑入设置动画。参考您的示例，也提供了一个 github 源，所以请看看那里，看看他是如何制作动画的。

$('.sidebar').animate({
    marginLeft: "0px",
    opacity: "1"
  }, 1000);

这是完整的小提琴。

http://jsfiddle.net/patrickhaede/n9MLk/

我还提供了一种列表视图，供您显示滑块的内容。希望对您有所帮助。