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