slideDown() 函数表现异常

Question

首先我应该说我对 web 开发和通过教程和这个网站等自学还很陌生......我正在尝试让视频显示在这个项目上，并且可以平滑地向下滑动（并向上滑动以隐藏）如本页所述：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

你的问题是，由于视频是 "sliding down"，它的高度在不断变化，浏览器保持视频的纵横比不变，这似乎使它也水平滑出。为了解决这个问题，我会将视频包裹在一个跨度中，然后将跨度向下滑动。这样视频的高度就不会改变，所以它的宽度也不会改变，这应该会消除您看到的水平运动。

所以 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，并停止更改视频中的 class： 在 slideDown/slideUp

上编辑为 play/pause

$(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();
        }
    })
});

奖励：通过从视频元素中删除控件属性，控件不再显示，添加自动播放属性允许视频在没有控件的情况下开始播放。

Here is a working codepen.

Answer 2

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

的 fiddle

<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() 函数表现异常

slideDown() function behaving oddly

html

javascript

video

jquery

slidedown