【问题标题】:JQuery slideDown slideUp mouseover mouseoutjQuery slideDown slideUp mouseover mouseout
【发布时间】:2013-04-26 08:11:14
【问题描述】:

我想要做的是将视频保留在 .slideDown 中,直到鼠标移出文本和视频,这可能吗?这是我到目前为止的代码

#text 和 #video 都是 div

这里是JS:

<script> 
 $(document).ready(function(){
  $("#text").mouseover(function(){
   $("#video").slideDown("slow");
  });
  $("#video").mouseout(function(){
   $("#video").slideUp("slow");
  });
 });
</script>

这里是 CSS:

#text
{
margin-top:20px;
float:center;
font:VNF-Museo;
font-size:40px;
color: #333;
margin-left:auto;
margin-right:auto;
}

#video
{
display:none;
width:1024px;
height:278px;
}

我在寻找解决方案,但找不到那么接近的解决方案。 谢谢

【问题讨论】:

    标签: jquery mouseover slidedown slideup mousedown


    【解决方案1】:

    我不是 100% 确定这是你想要做的,但我希望它有所帮助:

    $(document).ready(function() {
      $("#wrap").mouseover(function() {
        $("#video").stop().slideDown("slow");
      });
      $("#wrap").mouseout(function() {
        $("#video").slideUp("slow");
      });
    });
    #text {
      margin-top: 20px;
      float: center;
      font: VNF-Museo;
      font-size: 40px;
      color: #333;
      margin-left: auto;
      margin-right: auto;
      border: 1px solid #000;
    }
    
    #video {
      display: none;
      width: 1024px;
      height: 278px;
      border: 1px solid #000;
    }
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <div id="wrap">
      <div id="text">text</div>
      <div id="video">video</div>
    </div>

    另一个例子:http://jsfiddle.net/ZyUYN/

    【讨论】:

    • 这正是我要找的...谢谢!我会发布最终结果,但您以如此简单的方式提出,没有必要这样做。干杯丹尼尔!
    • 在第一个 DIV 下面有另一个 DIV 会使脚本发疯。
    猜你喜欢
    • 2017-03-17
    • 2011-03-03
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2023-04-07
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多