slideDown()函数的行为异常 [英] slideDown() function behaving oddly
问题描述
首先，我应该说我是Web开发的新手，并通过教程和本网站等课程自学...我试图使视频在此项目上显示，并顺利向下滑动(并向上隐藏)，如所解释的那样在此页面中: https://www.tutorialspoint.com/jquery/effect-slidedown. htm 最后还有一个演示，它可以像我希望的那样完美地运行.但是，这是我尝试时得到的:
firstly I should say I am fairly new to web development and teaching myself through tutorials and this site etc... I am trying to get videos displayed on this project with a nice smooth slide down (and up for hiding) as explained in this page: https://www.tutorialspoint.com/jquery/effect-slidedown.htm There is even a demo at the end in which it works perfectly just as I'd like mine to do. But here is what I get when I try it:
这是我的代码:
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:
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
I've cut some of the text for Stack OverFlow but the rest of the code is the same. My problem of course is that the video doesn't just slide down, it also slides horizontally which I don't want and the controls appear immediately which I can live with but also ideally I would not want. Also, the slideUp function doesn't work at all. Any help appreciated. P
--------------------------------------------------- - - - - - -编辑 - - - - - - - - - - - - - - - - - - - -------------------------
----------------------------------------------------------EDIT---------------------------------------------------------------
我尝试将视频包装在div中，然后将slideDown()方法应用于div而不是视频本身，这解决了两个问题(不必要的水平滑动以及它与SlideUpp不兼容的事实)但不幸的是，它只有在单击时才能正常运行，我要说五分之一.
I have tried wrapping the video in a div and applying the slideDown() method to the div instead of the video itself and that has solved both problems (the unwanted horizontal sliding and the fact that it wasn't working with SlideUpp) but unfortunately it works very erratically only being triggered on some click, I would say one time out of five.
推荐答案
您的问题是，随着视频滑落"，它的高度不断变化，浏览器保持视频的长宽比不变，这似乎使其也可以水平滑出.为了解决这个问题，我将视频包裹在一个跨度中，然后向下滑动跨度.这样，视频的高度就不会改变，因此宽度也不会改变，这应该消除了您看到的水平运动.
Your problem is that as the video is "sliding down", it's height is constantly changing, and the browser is keeping the aspect ratio of the video the same, which appears to make it also slide out horizontally. To fix that, I would wrap the video in a span, and then slide the span down. That way the video's height is never changing, so it's width won't change, and that should remove the horizontal motion you're seeing.
所以HTML看起来像这样:
So HTML would look something like this:
<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上播放/暂停
JS - I changed it to slideToggle, and stopped changing the class on the video: EDIT to play/pause on 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: by removing the controls attribute from the video element, the controls no longer show up, and adding the autoplay attribute allows the video to start playing without controls.
这篇关于slideDown()函数的行为异常的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
