Move two divs to opposite sides

Question

Move two divs to opposite sides

Navigation

#1 by (0 votes)

0

I have two divs, both with a button below, that when you click on it, you must move the div on the left, to the left, and the div on the right, to the right, until you both hide completely. In the resulting space, another div emerges in the center, showing other information, accompanied by a button to close it and return to the initial situation. I'm using jQuery and jQuery UI, but all I get is that the divs to scroll suddenly disappear, as if the method .hide() had no parameters.

HTML

<div class="wrapper">
    <div class="left" id="left-div">
        <p class="left-text">TEXT</p>
        <img src="video-left.png" alt="img" class="preview">
        <a class="btn-yellow" id="btn1">WATCH VIDEO</a>
    </div>
    <div class="right" id="right-div">
        <p class="right-text">TEXT</p>
        <img src="video-right.png" alt="img" class="preview">
        <a class="btn-yellow" id="btn2">WATCH VIDEO</a>
    </div>

    <div class="iframe" id="video1">
        <iframe width="560" height="315" src="https://www.youtube.com/embed/mmjlMgDSYFo" frameborder="0" gesture="media" allow="encrypted-media" allowfullscreen></iframe>
        <a id="close"><i class="fa fa-times-circle-o fa-2" aria hidden="true"></i></a>
    </div>

    <div class="iframe" id="video2">
        <iframe width="560" height="315" src="https://www.youtube.com/embed/mmjlMgDSYFo" frameborder="0" gesture="media" allow="encrypted-media" allowfullscreen></iframe>
        <a id="close"><i class="fa fa-times-circle-o fa-2" aria hidden="true"></i></a>
    </div>
 </div>

SASS

        .video-wrapper {
            position: relative;
            padding-bottom: 40.25%; /* 16:9 */
            padding-top: 25px;
            // max-width: 850px;
            height: 0;
            margin: 0 auto;
            display: flex;

            .left,
            .right {
                width: 50%;
                padding: {
                    top: 40px;
                    left: 10px;
                    right: 10px;
                }
                position: relative;

                p {
                    color: $white;
                    font-size: 20px;
                    text-align: left;
                    font-weight: $weight-bold;

                    &.right-text {
                        text-align: right;
                    }
                }

                .preview {
                    width: 100%;
                    height: auto;
                    margin-bottom: 20px;
                }

                .btn-yellow {
                    background-color: $yellow;
                    color: $green;
                    font-size: 26px;
                    font-weight: $weight-bold;
                    padding: 10px 25px;
                    transition: all .3s ease;

                    &:hover {
                        opacity: .7;
                    }
                }

                #btn1 {
                    float: left;
                }

                #btn2 {
                    float: right;
                }
            }

            .iframe {
                display: none;

                .video {
                    width: 74%;
                    margin: 0 auto;
                    top: 30px;
                    left: 140px;

                }

                a {
                    text-decoration: none;
                    transition: all .3s ease;

                    i {
                        color: $white;
                        font-size: 35px;
                        position: absolute;
                        right: 75px;
                    }

                    &:hover {
                        opacity: .7;
                    }
                }
            }
        }

JS

$leftButton = $('#btn1');
$rightButton = $('#btn2');
$leftDiv = $('#left-div');
$rightDiv = $('#right-div');
$videoLeft = $('#video1');
$closeBtn = $('#close');

$(document).ready(function(){

   $leftButton.click(function(){

     $leftDiv.hide("slide", {direction: "left"}, 600);

   });
});

jquery html jquery-ui sass

asked by TheWoodStudio 02.01.2018 в 16:37

source

1 answer

Shows id and not the value of name that it has in table, laravel 5.5 How to make a for loop inside a h: dataTable in JSF

score 0 · Accepted Answer

Finally I could solve it with jQuery in the following way:

function watchVideo(button, video) {
    button.click(function(){

        $leftDiv.animate({
            left: '-1450px',
        }, 1200);

        $rightDiv.animate({
            right: '-1450px',
        }, 1200);

        video.show(1200);

    });
}

function closeVideo(button, video) {
    button.click(function(){

        video.hide(1000);

        $leftDiv.animate({
            left: '0px',
        }, 1200);

        $rightDiv.animate({
            right: '0px',
        }, 1200);
    });
}

watchVideo($leftButton, $videoLeft);
watchVideo($rightButton, $videoRight);

closeVideo($closeBtn, $videoLeft);
closeVideo($closeBtn2, $videoRight);