0

Tengo dos divs, ambos con un botón debajo, que al clickearlo, debe desplazar el div de la izquierda, hacia la izquierda, y el div de la derecha, hacia la derecha, hasta ocultarse ambos totalmente. En el espacio resultante, emerge otro div en el centro, mostrando otra información, acompañado de un botón para cerrarlo y volver a la situación inicial. Estoy usando jQuery y jQuery UI, pero lo único que consigo es que los divs a desplazarse desaparezcan repentinamente, como si el método .hide() no tuviera parámetros.

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

   });
});

1 respuesta 1

0

Finalmente lo pude resolver con jQuery de la siguente manera:

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

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.