Search code examples
javascriptjqueryhtmlvideoslidedown

slideDown() function behaving oddly

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:

enter image description here

Here is my code:

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;
}

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---------------------------------------------------------------

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.

Solution

  • 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.

    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 - 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.

    Here is a working codepen.