小编We'*_*ars的帖子

我在屏幕顶部有一个10px的条,当点击时,我希望它的动画高度为40px,然后再次点击,动画回到10px.我尝试更改div的id,但它不起作用.我怎么能让这个工作,或者有更好的方法来做到这一点？

身体html:

<div id="topbar-show"></div>

CSS:

#topbar-show { width: 100%; height: 10px; background-color: #000; }
#topbar-hide { width: 100%; height: 40px; background-color: #000; }

JavaScript的:

$(document).ready(function(){
  $("#topbar-show").click(function(){
    $(this).animate({height:40},200).attr('id', 'topbar-hide');
  });
  $("#topbar-hide").click(function(){
    $(this).animate({height:10},200).attr('id', 'topbar-show');
  });
});

我有一个隐藏的div嵌套在一个更大的div中,并设置它,所以当你鼠标悬停在较大的div上时,隐藏的div向下滑动.在mouseout上,div滑回.问题是,当鼠标越过较小的div时,它会尝试将其滑回,因为mouseout事件已被触发.如何防止div再次隐藏,直到鼠标都没有div？

HTML:

<div id="topbarVis" class="col1 spanall height1 wrapper">
    <div id="topbar"></div>
</div>

(额外的类是模块化CSS系统的一部分,并定义#topbarVis的宽度和高度等

CSS:

#topbar {
  width: 100%;
  height: 30px;
  margin-top: -25px;
  background-color: #000;
} 

JS:

// On Mouseover -> Show
$("#topbarVis").mouseover(function(){
  $("#topbar").animate({marginTop:0}, 300);
});
// On Mouseout -> Hide
$("#topbarVis").mouseout(function(){
  $("#topbar").animate({marginTop:-25}, 300);
});