Question

首先，我应该说我是一个相当新的网站开发和教学自己通过教程和这个网站等...我试图让这个项目显示的视频有一个很好的平滑滑下（和隐藏），如解释在这个页面中：https://www.tutorialspoint.com/jquery/effect-slidedown.htm最后甚至还有一个演示，它完全正常，就像我希望的那样。但这是我尝试时得到的：

这是我的代码：

HTML：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Test1</title>
    <link rel="stylesheet" type="text/css" href="styles.css">
    <script type="text/javascript" src="jquery.js"></script>
    <script src="script.js" type="text/javascript"></script>
</head>
<body> 
    <div id="wrap">

    <p>Nullam dictum felis<span id="test">Some text</span> <video id="videoTest" width="350" controls><source src="mickey.mp4" type="video/mp4"></video>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>

</div>
</body>
</html>

JavaScript的：

$(document).ready(function(){

    $("#test").click(function(){
        if ($("#videoTest").css("display") == 'none') {

            $("#videoTest").slideDown("slow");
            $("#videoTest").css("display", "inline");

        } else {

            $("#videoTest").slideUp("slow");
            $("#videoTest").css("display", "none");
        }
    })
});

CSS：

#wrap{
    margin: 100px auto;
    width: 350px;
}

p {
    line-height: 2em;   
}

#test{
    color: blue;
    cursor: pointer;    
}

#videoTest{
    display: none;
}

我已经删除了Stack OverFlow的一些文本，但其余的代码是相同的。我的问题当然是视频不只是向下滑动，它也是水平滑动的，我不想要，控件立即出现，我可以忍受，但理想情况下我也不想要。此外，slideUp功能根本不起作用。任何帮助赞赏。 P

----------------------------------------------- - - - - - -编辑 - - - - - - - - - - - - - - - - - - - -------------------------

我尝试将视频包装在div中并将slideDown（）方法应用于div而不是视频本身，这解决了两个问题（不需要的水平滑动以及它不能与SlideUpp一起使用）但遗憾的是，它的工作非常不稳定，只是在点击时被触发，我会说五次中的一次。

Answer 1

你的问题是，当视频“向下滑动”时，它的高度不断变化，浏览器保持视频的纵横比相同，这似乎也使它也水平滑出。为了解决这个问题，我会将视频换成一个跨度，然后向下滑动跨度。这样，视频的高度永远不会改变，所以它的宽度不会改变，这应该会消除你所看到的水平运动。

所以HTML看起来像这样：

<p>Nullam dictum felis
    <span id="test">Some text</span>
    <span class="wrapVideo">
        <video id="videoTest" width="350" height="200" autoplay>
            <source src="http://techslides.com/demos/sample-videos/small.mp4" type="video/mp4">
        </video>
    </span>
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
</p>

CSS：

.wrapVideo {
    height: 200px;
    display: none;
}

JS - 我将其更改为slideToggle，并停止更改视频上的类： 编辑以在slideDown / slideUp上播放/暂停

$(document).ready(function(){
    $("#test").click(function(){
        if($(".wrapVideo").css("display") == 'none') {
            $(".wrapVideo").slideDown("slow");
            $("#videoTest").get(0).play();
        } else {
            $(".wrapVideo").slideUp("slow");
            $("#videoTest").get(0).pause();
        }
    })
});

BONUS：通过从视频元素中删除控件属性，控件不再显示，添加自动播放属性可让视频无需控件即可开始播放。

Here is a working codepen.

Answer 2

请检查位于https://jsfiddle.net/c16kpve6/

的小提琴

<button id='slideDown'>slide down</button>
<div id='container'>
  <img src="https://peach.blender.org/wp-content/uploads/dl_vim.jpg?x11217" alt="">
  <video src="http://download.blender.org/peach/bigbuckbunny_movies/BigBuckBunny_320x180.mp4"></video>
</div>

CSS

#container {
  height: 180px;
  width: 320px;
  position: relative;
  display:none;
 }
#container img {
  position: absolute;
  height: 180px;
  width: 320px;
  left:0;
  right:0;
  z-order: -1;
  float: left;
}

#container video {
  position: absolute;
  height: 180px;
  width: 320px;
  left:0;
  right:0;
  float: left;
  display: none;
}

JS

$('#slideDown').on('click', function() {
  $('#container').slideDown(function(){
    $('video').show();
  })
})

slideDown（）函数表现得很奇怪

2 个答案: