Question

你好我这里有3个不同的div。如何从左到右更改hide / show 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动画功能来真正动画div滑动。参考你的例子，还有一个github源，所以看看那里，看看他是如何做动画的。 / p>

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

这是完整的小提琴。

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

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

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

1 个答案: