滑動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）

回答

相關問題