使用jQuery单击动画幻灯片

时间：2018-03-15 01:01:11

标签： javascript jquery html css

我创建了一个滑块，但我尝试动画左右框以分别为时间淡入淡出，左边的淡入比右边快。

我已经尝试使用我所拥有的一点点知识制作一个jQuery脚本，但遗憾的是它不起作用，我想知道是否有人可以指出我正确的方向/告诉我应该怎么做完成。

＆＃13;
＆＃13; 
window.location.hash = 'slide-1';

$(".control").click(function () {
  $('.vs-box-left').fadeIn(100);
  $('.vs-box-right').fadeIn(200);
});
＆＃13; 
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;
}
＆＃13; 
<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 -->
＆＃13;
＆＃13;
＆＃13;

1 个答案:

答案 0 :(得分：1)

您需要在此淡入时添加hide()。

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

相关问题
最新问题