Fatal编程技术网
  • javascript/
  • Javascript 通过单击JQuery中的另一个Div，左/右和上/下移动Div

Javascript 通过单击JQuery中的另一个Div，左/右和上/下移动Div

javascript jquery html css

Javascript 通过单击JQuery中的另一个Div，左/右和上/下移动Div,javascript,jquery,html,css,Javascript,Jquery,Html,Css,根据下面的答案，我已经成功地将div向左/向右滑动，但是遇到了一些关于top div的问题。现在我想要的是 1.使两条棕色线变细（如果我更改宽度，会破坏动画） 2.单击垂直棕色线时，向左/向右滑动div，并相应地重新调整顶部div的宽度。 3.单击水平棕色线时，向上/向下滑动顶部div。我可以做一部分，但不完美。谁能帮帮我吗。低于我 <html xmlns="http://www.w3.org/1999/xhtml"> <head id="Head1" runat="serve

根据下面的答案，我已经成功地将div向左/向右滑动，但是遇到了一些关于top div的问题。现在我想要的是 1.使两条棕色线变细（如果我更改宽度，会破坏动画） 2.单击垂直棕色线时，向左/向右滑动div，并相应地重新调整顶部div的宽度。 3.单击水平棕色线时，向上/向下滑动顶部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>


$（文档）.ready（函数（）{
$（“#showHideDiv”）。单击（函数（）{
如果（！$（'#divMenu'）.hasClass（“关闭”））{
$（'divMenu'）。动画（{'marginleft'：'-95%'），500）；
$（'#divMenu'）.addClass（“off”）；
$（'.div3'）.animate（{'left'：'-10%'，'width'：'99.3%'，'marginleft'：'-10.5%'），500）；
//$（'.div3'）.animate（{'left'：'-10%'，'width'：'99.3%'，'marginleft'：'-10.5%'），500）；
}
否则{
$（'divMenu'）。动画（{'marginleft'：'0px'}，500）；
$（'#divMenu'）.removeClass（“off”）；
$（'.div3'）.animate（{'left'：'-0%'，'width'：'89%'，'marginleft'：'-0%'），500）；
}
});
});
侧栏-菜单
你好
你好

首先，我将.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标记中

比如：

}

z指数：999；顶部：20px；左：0；左边距：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;
    }
});  
});

一把小提琴（）和一些关于Exaclity不起作用或你不能做的事情的更多细节将非常有用。典型的滑动效果在
左边距
属性（对于相对元素）或css
左边
属性（对于绝对元素）上使用
动画
。@Spokey。。当单击另一个div时，我无法向左/向右滑动div。当top div（图中的div3）滑入或滑出时，我也无法重新调整top div的大小。谢谢。这就是我在看的for@Froient.. $（'.div3'）.animate（{'left'：'-11%'，'width'：'100%'，'margin-left'：'11%'，100）；这不正常。如果我添加$（'.div3'）.animate（{'margin-left'：'-10.5%}，500）；，然后，它不会重新调整div3@Froient.. 我已编辑（扩展要求）该问题。你能再帮我一次吗？@Froient。。上面的代码可以正常工作，但当侧栏向左滑动时，顶部栏会下降一会儿。这种效果在firefox中非常明显。我尝试过各种各样的事情，但都做不到。如果您能解释以上代码，那将是您的巨大帮助，因为我是Jquery新手。@Chirag Fanse我明白了，请检查更新的答案，我也在JSFIDLE中更新了演示。 
$("#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");
            }
        });  

 <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;

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;
    }
});  
});