0

I have a big green box using <div>, and I have two more smaller divs called red and blue.

When someone clicks on green box, I want the red box to slide up at the same time blue box slides down.

And then when someone clicks on the green box, the red box should slide down and green box should slide up.

I have written this basic scripts, but when I click on the green box, both the red box and the green box will slide up at the same time.

How can make it so that one goes up and the other goes down at the same time?

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

2 回答 2

0

您不能隐藏（通过向上滑动）父元素，然后期望子元素可见。既然#blue是这样的孩子#red是行不通的。此外，因为#blue已经可见，slideDown()所以无论如何都不会做任何事情。

另外，为什么要将两个函数传递给.click()？.click()只需要一个处理函数。如果您传递两个参数，它会将第一个参数视为事件数据。

于 2012-11-13T03:13:00.413 回答
0

正如我之前提到的，SlideUp 和 SlideDown 通过滑动隐藏匹配的元素。它不会“滑动”东西。

我修改了您的代码以使用animate函数创建效果。看看 jsfiddle，看看这是否是你所追求的？

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

于 2012-11-13T03:15:29.837 回答