Aaron
Reputation: 199
Animating slides on click with jQuery
I've created a slider but I'm trying to animate the left and right boxes to fade in separately timed, left fading in faster than the right.
I've tried to make a jQuery script using the little knowledge I have but unfortunately it doesn't work, I was wondering if someone could point me in the right direction with this/show me how it should be done.
window.location.hash = 'slide-1';
$(".control").click(function () {
$('.vs-box-left').fadeIn(100);
$('.vs-box-right').fadeIn(200);
});body {
margin-top: 40px;
font-family: sans-serif;
}
h3 {
font-family: Montserrat,sans-serif;
font-weight: 700;
letter-spacing: 0.16em;
line-height: 1.1;
text-transform: uppercase;
font-size: 26px;
}
/** VS Slider **/
.vs-slider {
height: 470px;
position: relative;
width: 1110px;
margin: 0 auto;
}
.vs-slide {
height: 100%;
position: absolute;
width: 100%;
-webkit-transform: scale(0);
-moz-transform: scale(0);
-o-transform: scale(0);
-ms-transform: scale(0);
transform: scale(0);
}
.vs-slide:target {
z-index: 10;
-webkit-transform: scale(1);
-moz-transform: scale(1);
-o-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
opacity: 1;
}
.vs-controls {
list-style: none;
margin: 0;
padding: 0;
width: 100%;
text-align: center;
display: inline-block;
}
.vs-controls li {
display: inline-block;
padding: 20px;
}
.vs-controls li a {
text-decoration: none;
color: #000;
}
/** Slides **/
.vs-box-text h3, .vs-box-text p {
color: #fff;
}
.vs-box-container {
width: 1110px; /*Remove to let it fill cont*/
margin: 0 auto;
}
.vs-box-left, .vs-box-right {
max-width: 50%;
float: left;
min-height: 380px;
border-radius: 8px;
box-shadow: 0 1px 5px #000;
position: relative;
}
.vs-box-text {
padding: 75px;
}
.vs-box-left .vs-box-text {
margin-right: 80px;
}
.vs-box-right .vs-box-text {
margin-left: 80px;
}
.vs-box-left {
background: linear-gradient(135deg, #214860 0%, #61BEB7 100%);
z-index: 2;
}
.vs-box-right {
z-index: 1;
margin-top: 60px;
margin-left: -30px;
background: -webkit-linear-gradient(-90deg, #0870b7 0%, #0d3757 100%);
}
.vs-box-text span {
border-bottom: 6px solid transparent;
display: inline-block;
padding-bottom: 10px;
border-bottom-color: #fff;
}
.vs-box-circle {
position: absolute;
border-radius: 80px;
width: 160px;
height: 160px;
background: #fff;
left: 48%;
top: 250px;
-webkit-transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
z-index: 20;
text-align: center;
}
.vs-box-circle h3 {
margin: 0;
color: #0D2345;
font-size: 60px;
font-weight: 700;
line-height: 160px;
letter-spacing: 0px;
}<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="vs-slider">
<div class="vs-box-circle">
<h3>VS</h3>
</div>
<!-- First Slide -->
<div class="vs-slide" id="slide-1">
<div class="vs-box-left">
<div class="vs-box-text">
<h3><span>Slide 1</span></h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
</div>
<div class="vs-box-right">
<div class="vs-box-text">
<h3><span>Slide 1</span></h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
</div>
</div>
<!-- /First Slide -->
<!-- Second Slide -->
<div class="vs-slide" id="slide-2">
<div class="vs-box-left">
<div class="vs-box-text">
<h3><span>Slide 2</span></h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
</div>
<div class="vs-box-right">
<div class="vs-box-text">
<h3><span>Slide 2</span></h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
</div>
</div>
<!-- /Second Slide -->
<!-- Third SLide -->
<div class="vs-slide" id="slide-3">
<div class="vs-box-left">
<div class="vs-box-text">
<h3><span>Slide 3</span></h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
</div>
<div class="vs-box-right">
<div class="vs-box-text">
<h3><span>Slide 3</span></h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
</div>
</div>
<!-- /Third Slide -->
</div>
<!-- VS Slider Controls -->
<ul class="vs-controls">
<li class="control"><a href="#slide-1"><i class="fa fa-circle-o"></i></a></li>
<li class="control"><a href="#slide-2"><i class="fa fa-circle-o"></i></a></li>
<li class="control"><a href="#slide-3"><i class="fa fa-circle-o"></i></a></li>
</ul>
<!-- /VS Slider Controls -->Upvotes: 2
Views: 37
Answers (1)
user6113352
Reputation:
You need to add hide() in your fade in like this.
window.location.hash = 'slide-1';
$(document).ready(function() {
$(".control").click(function () {
$(".vs-box-left").hide().fadeIn(1000);
$('.vs-box-right').hide().fadeIn(2000);
});
});body {
margin-top: 40px;
font-family: sans-serif;
}
h3 {
font-family: Montserrat,sans-serif;
font-weight: 700;
letter-spacing: 0.16em;
line-height: 1.1;
text-transform: uppercase;
font-size: 26px;
}
/** VS Slider **/
.vs-slider {
height: 470px;
position: relative;
width: 1110px;
margin: 0 auto;
}
.vs-slide {
height: 100%;
position: absolute;
width: 100%;
-webkit-transform: scale(0);
-moz-transform: scale(0);
-o-transform: scale(0);
-ms-transform: scale(0);
transform: scale(0);
}
.vs-slide:target {
z-index: 10;
-webkit-transform: scale(1);
-moz-transform: scale(1);
-o-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
opacity: 1;
}
.vs-controls {
list-style: none;
margin: 0;
padding: 0;
width: 100%;
text-align: center;
display: inline-block;
}
.vs-controls li {
display: inline-block;
padding: 20px;
}
.vs-controls li a {
text-decoration: none;
color: #000;
}
/** Slides **/
.vs-box-text h3, .vs-box-text p {
color: #fff;
}
.vs-box-container {
width: 1110px; /*Remove to let it fill cont*/
margin: 0 auto;
}
.vs-box-left, .vs-box-right {
max-width: 50%;
float: left;
min-height: 380px;
border-radius: 8px;
box-shadow: 0 1px 5px #000;
position: relative;
}
.vs-box-text {
padding: 75px;
}
.vs-box-left .vs-box-text {
margin-right: 80px;
}
.vs-box-right .vs-box-text {
margin-left: 80px;
}
.vs-box-left {
background: linear-gradient(135deg, #214860 0%, #61BEB7 100%);
z-index: 2;
}
.vs-box-right {
z-index: 1;
margin-top: 60px;
margin-left: -30px;
background: -webkit-linear-gradient(-90deg, #0870b7 0%, #0d3757 100%);
}
.vs-box-text span {
border-bottom: 6px solid transparent;
display: inline-block;
padding-bottom: 10px;
border-bottom-color: #fff;
}
.vs-box-circle {
position: absolute;
border-radius: 80px;
width: 160px;
height: 160px;
background: #fff;
left: 48%;
top: 250px;
-webkit-transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
z-index: 20;
text-align: center;
}
.vs-box-circle h3 {
margin: 0;
color: #0D2345;
font-size: 60px;
font-weight: 700;
line-height: 160px;
letter-spacing: 0px;
}<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="vs-slider">
<div class="vs-box-circle">
<h3>VS</h3>
</div>
<!-- First Slide -->
<div class="vs-slide" id="slide-1">
<div class="vs-box-left">
<div class="vs-box-text">
<h3><span>Slide 1</span></h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
</div>
<div class="vs-box-right">
<div class="vs-box-text">
<h3><span>Slide 1</span></h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
</div>
</div>
<!-- /First Slide -->
<!-- Second Slide -->
<div class="vs-slide" id="slide-2">
<div class="vs-box-left">
<div class="vs-box-text">
<h3><span>Slide 2</span></h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
</div>
<div class="vs-box-right">
<div class="vs-box-text">
<h3><span>Slide 2</span></h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
</div>
</div>
<!-- /Second Slide -->
<!-- Third SLide -->
<div class="vs-slide" id="slide-3">
<div class="vs-box-left">
<div class="vs-box-text">
<h3><span>Slide 3</span></h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
</div>
<div class="vs-box-right">
<div class="vs-box-text">
<h3><span>Slide 3</span></h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
</div>
</div>
<!-- /Third Slide -->
</div>
<!-- VS Slider Controls -->
<ul class="vs-controls">
<li class="control"><a href="#slide-1"><i class="fa fa-circle-o"></i></a></li>
<li class="control"><a href="#slide-2"><i class="fa fa-circle-o"></i></a></li>
<li class="control"><a href="#slide-3"><i class="fa fa-circle-o"></i></a></li>
</ul>
<!-- /VS Slider Controls -->Upvotes: 1
Related Questions
- Slideshow Animation with JQuery instead of CSS
- jquery simple slideshow
- Slide content animation
- Jquery - Animation as Slide
- Animate slideshow horizontally on click
- jQuery slide animation triggered by button click
- JQuery slide effect with mouseclick
- jQuery slide out animation
- Slide show, slide effect
- How to add slide animation when showing elements