jQuery 将 div 从父 div 中拉出

Question

我必须将div 框放在彼此之上，如果有人将鼠标悬停在上面，我想隐藏上面的框。.HTML：

<div id="left_middle">
<div id="rfinder_UP"></div>
<div id="rfinder_DWN"></div>
</div>

.CSS：

#left_middle {
position:relative;
float: left;
width: 235px;
min-height: 220px;
background:green;
margin-right: 10px;
 -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
    -khtml-border-radius: 5px;
    border-radius: 5px;
}
#rfinder_UP, 
#rfinder_DWN {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
     -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
    -khtml-border-radius: 5px;
    border-radius: 5px;
}
#rfinder_DWN{
background: url(images/rfinderapp_DWN.png) no-repeat;
}
#rfinder_UP {
    background: url(images/rfinderapp_UP.png) no-repeat;
  z-index: 10;
}

.JS

$(document).ready(function(){
$("#rfinder_UP").mouseover(function(){
  $("#rfinder_UP").hide();
  });
$("#rfinder_DWN").mouseout(function(){
  $("#rfinder_UP").show();
  });
});

现在我想通过不仅使用 .hide 隐藏上部div 而且以某种方式将其从底部拉出left_middlediv 来实现这一点。有没有简单的方法可以做到这一点？我尝试了很多不同的其他jQuery效果，如animate，slideDown等，但找不到可行的解决方案。

提前感谢！

我在这里创建了一个jsFiddle：http://jsfiddle.net/qEcp8/红色框在悬停时消失，露出黑色框。我想要的是红色的从left_middle框中滑下来。

Answer 1

$( "#rfinder_UP" ).hover(function() {
  $('#rfinder_DWN').animate({height:"100%"});
}, function() {
  $('#rfinder_DWN').animate({height:"0"});
}
);

演示：http://jsfiddle.net/EyVd6/1/

请检查整个代码，我已经相应地更改了您的 html 和 css...

Answer 2

试试这个：

#rfinder_UP:hover {
    display:none;
}