Slideup and slidedown box

我有一個很大的綠色框，使用<div>，我還有兩個更小的div，分別叫做紅色和藍色。Slideup and slidedown box

當有人點擊綠色框時，我想讓紅色框向上滑動，同時藍色框滑下。

然後，當有人點擊綠色框，紅色框應滑下，綠色框應滑動。

我已經寫了這個基本腳本，但是當我點擊綠色框時，紅色框和綠色框都會同時滑動。

怎樣才能使一個人在同一時間上升而另一個人下降呢？

CSS：

.block { 
    position: absolute; 
    left: 23px; 
    top: 34px; 
    width: 500px; 
    height: 360px; 
    z-index: 1; 
    background-color: #0F0; 
} 
.top-box { 
    background-color: #F00; 
    height: 179px; width: 499px; 
    z-index: 50; 
} 

.top-down { 
    background-color: #00F; 
    height: 179px; 
    width: 499px; 
    z-index: 50; 
} 

.bottom-box { 
    background-color: #06F; 
    height: 179px; 
    width: 499px; 
} 

#red { 
    position: absolute; 
    left: 266px; 
    top: 399px; 
    width: 494px; 
    height: 138px; 
    z-index: 2; 
} 

#blue { 
    position: absolute; 
    left: 26px; 
    top: 35px; 
    width: 494px; 
    height: 138px; 
    z-index: 2; 
}

的JavaScript：

$(".block").click(
    function(){ 
     $(".top-box").slideUp('fast'); 
    }, 
    function(){ 
     $(".top-down").slideDown('slow'); 
    }); 
});

HTML：

<div class="block">  
    testing on green 
    <div class="top-box" id="red"> 
     <div class="top-down" id="blue"> 
     </div> 
    </div>

來源

2012-11-13 user1819558

SlideUp和SlideDown用滑動隱藏匹配的元素。那是你的追求？你可以請你的代碼在jsfidde？所以我們可以看到發生了什麼......謝謝。 – neo108

您好，感謝您的回覆，在這裏您可以看到該示例，但仍然無法在jsfidde中工作，我是該網站的新成員，但不知道如何使用jsfidde中的jquery進行設置。不過請看看我的jsfiddle.net/Alidad/TMTMH/1/我喜歡看什麼，當你點擊綠色框時，紅色框上滑，同時藍色框同時滑下，這是如何工作的！ – user1819558

您不能隱藏（按滑準了）父元素，然後期望的子元素可見。由於#blue是#red的孩子，因此這不起作用。另外，由於#blue已經可見，slideDown()無論如何都不會做任何事情。

另外，你爲什麼要將兩個函數傳遞給.click()？ .click()只需要一個處理函數。如果您傳遞兩個參數，它會將第一個參數視爲事件數據。

來源

2012-11-13 03:13:00

正如我前面提到的，SlideUp和SlideDown以滑動方式隱藏了匹配的元素。它不會「滑動」四周。

我修改了您的代碼以使用animate函數創建效果。看看這個jsfiddle，看看這是你在做什麼之後？

http://jsfiddle.net/neo108/SRYXN/

來源

2012-11-13 03:15:29 neo108

Slideup and slidedown box

回答

相關問題