滑动div和堆叠它们（JavaScript）

我正在做我的网站，我有一个小小的路障。 This is how my code looks right now，我想要做的是在“主页”框下方的“关于”框中，并将上面的框与您在单击“主页”框时出现的描述一起向下滑动。我该怎么做？滑动div和堆叠它们（JavaScript）

这是我的JS文件的代码。

$(document).ready(function (event) { 
    var clicked=false; 

    $(".one").on('click', function(){ 
     if(clicked) 
     { 
      clicked=false; 
      $(".two").css({"top": -40}); //Slides upwards 40pixels  
     } 
     else 
     { 
      clicked=true; 
      $(".two").css({"top": 0}); //Slides righ under "one"  
     } 
    }); 

    var clicked2=false; 

    $(".three").on('click', function(){ 
     if(clicked2) 
     { 
      clicked2=false; 
      $(".four").css({"top": -100}); //Slides upwards 40pixels  
     } 
     else 
     { 
      clicked2=true; 
      $(".four").css({"top": 0}); //Slides righ under "one"  
     } 
    }); 
});

一个完整侧面说明，我怎么能拿箱子从页面的顶部开始，我怎么能让他箱子是一个巨大的盒子评价者比颜色的微小条？

来源

2016-02-01 Hello Mellow

它可以用做['的slideToggle（）']（http://api.jquery.com/slidetoggle/） – Brewal

的slideToggle（）就像打开和关闭它有点事，我想它实际上滑出，而不是只是开放 –

其实，我想我只会使用slideToggle（）哈哈，感谢您的想法！ –

你可以试试这个：

.container { 
    overflow:hidden; 
} 
.one { 
    position: relative; 
    top: 0; 
    background-color: #FFC300; 
    z-index: 1; 
    cursor:pointer; 
} 
.two { 
    position: relative; 
    top: -40px; 
    background-color: yellow; 
    z-index: -1; 
    -webkit-transition: top 1s; 
    -moz-transition: top 1s; 
    -o-transition: top 1s; 
    transition: top 1s; 
} 
.three{ 
    position: relative; 
    top: 0; 
    background-color: #E9A1B9; 
    z-index: 1; 
    cursor:pointer; 
} 

.four { 
    position: relative; 
    top: -18px; 
    background-color: #02C9C9; 
    z-index: -1; 
    -webkit-transition: top 1s; 
    -moz-transition: top 1s; 
    -o-transition: top 1s; 
    transition: top 1s; 
}

DEMO HERE

来源

2016-02-01 09:54:30

嘿！谢谢，这解决了一个问题，但是有没有什么办法可以使我们的酒吧落在家庭酒吧下方，而不是留下家庭酒吧的描述会出现的差距？另外，你知道如何使箱子变大吗？（就像屏幕的四分之一大一样），所以我可以居中文本并更改字体 –

检查它的先生@HelloMellow https：// jsfiddle。净/ ivinraj/dpydwkap/2 / –

我会用一个负利润率和切换的.one和.three的div简单.open类：

$(".one, .three").click(function(){ 
    $(this).toggleClass('open'); 
});

CSS：

.one, .three { 
    margin-bottom: -40px; 
    -webkit-transition: margin-bottom 1s; 
    -moz-transition: margin-bottom 1s; 
    -o-transition: margin-bottom 1s; 
    transition: margin-bottom 1s; 
} 
.open {margin-bottom: 0}

jsFiddle demo

来源

2016-02-01 10:26:07 Brewal

通过使用jQuery toggle（）函数为您完成工作，您可以简化这一点。（编辑：您还可以使用的slideToggle（）用于不同的效果）

$(selector).toggle(speed,callback);

可选的速度参数可以采取以下值：“慢”，“快”，或毫秒。

可选的回调参数是在toggle（）完成后执行的函数。

HTML

<div class="container"> 
    <div class="one">Main</div> 
    <div class="two" style="display: none">Welcome to my page!</div> 

    <div class="three">About</div> 
    <div class="four" style="display: none">All about me</div> 
</div>

CSS

.one { 
    background-color: #FFC300; 
    cursor:pointer; 
} 
.two { 
    background-color: yellow; 
} 
.three{ 
    background-color: #E9A1B9; 
    cursor:pointer; 
} 
.four { 
    background-color: #02C9C9; 
}

$(document).ready(function (event) { 
    $(".one").on('click', function(){ 
     $(".two").toggle("slow");  
    }); 

    $(".three").on('click', function(){ 
     $(".four").toggle("slow"); 
    }); 
});

DEMO：

https://jsfiddle.net/qbuatjrm/4/

来源

2016-02-01 10:27:40 Nils

滑动div和堆叠它们（JavaScript）

回答

相关问题