通過在JQuery中單擊另一個div向左/向右和向上/向下移動Div

Question

根據以下答案，我設法向左/向右滑動div，但是在頂部div方面遇到了一些問題。 現在我要的是1.減小兩條棕色線的寬度（如果改變寬度，則會破壞動畫效果）2.單擊垂直棕色線時左右滑動div並相應地調整頂部div的寬度。 3.單擊水平棕色線時，上下滑動top div。 我可以部分但不是完美地做到這一點。 有人可以幫幫我嗎。 我以下

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<script src="JQuery.js"></script>
<script src="JQuery-UI.js"></script>
<%-- <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>--%>
<link href="App_Themes/Design.css" rel="stylesheet" />
<link href="App_Themes/PageDesigns.css" rel="stylesheet" />
<title></title>
<script type="text/javascript">
    $(document).ready(function () {
        $("#showHideDiv").click(function () {
            if (!$('#divMenu').hasClass("off")) {
                $('#divMenu').animate({ 'margin-left': '-95%' }, 500);
                $('#divMenu').addClass("off");
                $('.div3').animate({ 'left': '-10%', 'width': '99.3%', 'margin-left': '-10.5%' }, 500);
                //$('.div3').animate({ 'left': '-10%', 'width': '99.3%', 'margin-left': '-10.5%' }, 500);

            }
            else {
                $('#divMenu').animate({ 'margin-left': '0px' }, 500);
                $('#divMenu').removeClass("off");
                $('.div3').animate({ 'left': '-0%', 'width': '89%', 'margin-left': '-0%' }, 500);
            }
        });
    });
</script>
</head>
<body>
<form id="form1" runat="server">
    <div style="float: left; width: 11%; height: 850px; padding: 0; margin: 0;">
        <div id="divMenu" class="">
            Sidebar- Menu
        </div>
        <div id="showHideDiv" style="float: left; height: 850px; width: 5%; background-color: brown;">
        </div>
    </div>
    <div class="div3" style="float: left; width: 89%; ">
        <div style="float: left; background-color: #93D209; width: 100%; height: 50px;display:block">
            hello
        </div>
        <div style="height: 0.5%; width: 100%; background-color: brown;display:block">
            hi
        </div>
    </div>
</form>
</body>
</html>

Answer 1

更新的演示

首先，我將.div3 CSS設置為：

.div3{
    position: absolute;
    width: 89%;
    margin-left: 11%;
}

左邊距的初始設置取決於邊欄的總寬度。 並將其設置為絕對位置，這樣它就不會掉下來。 您也可以根據需要將其設置為固定。

單擊側邊欄開關時，.div3設置為將其左邊距動畫化為0％，並將其寬度增加到99％至100％，這樣它將占據整個屏幕。

 $('.div3').animate({ 'margin-left': '0%', 'width': '99.3%'}, 500);

切換邊欄時，將.div3動畫設置為原始/初始邊距（左側為11％，寬度為89％）。

 $('.div3').animate({ 'margin-left': '11%', 'width': '89%'}, 500);

至於頂部開關，我添加了以下jQuery：

 $("#switch2").click(function () {
        if (!$('#topDiv').hasClass("off")) {
            $('#topDiv').animate({ 'margin-top': '-95%' }, 500);
            $('#topDiv').addClass("off");

        }
        else {
            $('#topDiv').animate({ 'margin-top': '0px' },500);
            $('#topDiv').removeClass("off");
        }
    });

並將id屬性（#topDiv和＃switch2）添加到相關的html標簽中。

喜歡：

<div class="div3">
        <div id="topDiv">
            hello
        </div>
        <div id="switch2">
            hi
        </div>
</div>

整個jQuery腳本：

$("#showHideDiv").click(function () {
            if (!$('#divMenu').hasClass("off")) {
                $('#divMenu').animate({ 'margin-left': '-95%' }, 500);
                $('#divMenu').addClass("off");
                $('.div3').animate({ 'margin-left': '0%', 'width': '99.3%'}, 500);

            }
            else {
                $('#divMenu').animate({ 'margin-left': '0px' }, 500);
                $('#divMenu').removeClass("off");
                $('.div3').animate({ 'margin-left': '11%', 'width': '89%'}, 500);
            }
        });
     $("#switch2").click(function () {
            if (!$('#topDiv').hasClass("off")) {
                $('#topDiv').animate({ 'margin-top': '-95%' }, 500);
                $('#topDiv').addClass("off");

            }
            else {
                $('#topDiv').animate({ 'margin-top': '0px' },500);
                $('#topDiv').removeClass("off");
            }
        });

工作樣本

Answer 2

 <div class="container">

<div class="menu-btn">
<a href="javascript:void(0);">
    <h6>click me</h6> 
</a>

.container { width:150px; height:500px; background:#000; margin-left:-150px;

}

.menu-btn { width:50px; height:20px; background:#d2d2d2; position: fixed;

z-index：999； top：20px； left：0； margin-left：25px；}

var flagswap=0;
$(document).ready(function () {
  $('.menu-btn a').click(function()
{
    if(flagswap==0)
    {
        $('.container').animate({marginLeft:0},500);
        $('.menu-btn').animate({marginLeft:'170px'},500);
        flagswap=1;
    }
    else
    {
        $('.menu-btn').animate({marginLeft:'25px'},500);
        $('.container').animate({marginLeft:'-150px'},500);
        flagswap=0;
    }
});  
});

http://jsfiddle.net/uBhR6/

通過在JQuery中單擊另一個div向左/向右和向上/向下移動Div

問題描述

2 個解決方案

解決方案1
1 已采納 2014-05-19 09:52:19

解決方案2
0

通過在JQuery中單擊另一個div向左/向右和向上/向下移動Div

問題描述

2 個解決方案

解決方案1 1 已采納 2014-05-19 09:52:19

解決方案2 0

解決方案1
1 已采納 2014-05-19 09:52:19

解決方案2
0