Question

我正在尝试构建一个以背景颜色淡化的滑块，在此背景渐渐消失后，内容会在几秒钟后动画显示。

我已经尝试添加.delay（）来为内容添加动画，但这似乎是从页面加载开始的，而不是从特定的幻灯片变为可见。

希望有意义，任何帮助都会受到高度赞赏。

这是我到目前为止的一个例子 - http://robsarna.co.uk/stuff/slider/

谢谢

<!doctype html>
<html>
<head>
<meta charset="utf-8">

<title>Basic jQuery Slider - Demo</title>

<!-- bjqs.css contains the *essential* css needed for the slider to work -->
<link rel="stylesheet" href="http://www.robsarna.co.uk/stuff/bjqs.css">





<!-- load jQuery and the plugin -->
<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script src="http://www.robsarna.co.uk/stuff/js/bjqs-1.3.min.js"></script>

  <style>
  .open {font-size:30px;}
  #slide1 {background-color:#09F; color:white; font-size:50px;}
  .big1 {height:1000px!important; background-color:#09F;}
  #slide2 {background-color:#C33; color:white; font-size:50px;}
  .big2 {height:1000px!important; background-color:#C33}
   #slide3 {background-color:#3F6; color:white; font-size:50px;}
  .big3 {height:1000px!important; background-color:#3F6;}

  /* Basic jQuery Slider essential styles */

ul.bjqs{position:relative; list-style:none;padding:0;margin:0;overflow:hidden; display:none;}
li.bjqs-slide{position:absolute; display:none;}
ul.bjqs-controls{list-style:none;margin:0;padding:0;z-index:9999;}
ul.bjqs-controls.v-centered li a{position:absolute;}
ul.bjqs-controls.v-centered li.bjqs-next a{right:0;}
ul.bjqs-controls.v-centered li.bjqs-prev a{left:0;}
ol.bjqs-markers{list-style: none; padding: 0; margin: 0; width:100%;}
ol.bjqs-markers.h-centered{text-align: center;}
ol.bjqs-markers li{display:inline;}
ol.bjqs-markers li a{display:inline-block;}
p.bjqs-caption{display:block;width:96%;margin:0;padding:2%;position:absolute;bottom:0;}



  </style>

</head>

 <body>

<div id="container">



  <h2>Slide Example</h2>


  <div id="banner-slide">

    <!-- start Basic Jquery Slider -->
    <ul class="bjqs">
      <li id="slide1"><a href="#" id="open1" class="open">OPEN1</a>
      <div id="content1"> CONTENT TO ANIMATE 1</div>
      </li>



 <li id="slide2"><a href="#" id="open2" class="open">OPEN2</a>  <div id="content2"> CONTENTTO ANIMATE 2</div></li>
      <li id="slide3"><a href="#" id="open3" class="open">OPEN3</a>  <div id="content3"> CONTENT TO ANIMATE 3</div></li>
    </ul>
    <!-- end Basic jQuery Slider -->

  </div>
  <!-- End outer wrapper -->


  <script>
    jQuery(document).ready(function($) {



      $('#banner-slide').bjqs({
        animtype      : 'fade',
        height        : 320,
        width         : 620,
        responsive    : true,
        randomstart   : false
      });


      $('#open1').click(function(){

    $('#banner-slide').toggleClass('big1');


    });

 $('#open2').click(function(){

    $('#banner-slide').toggleClass('big2');


    });


 $('#open3').click(function(){

    $('#banner-slide').toggleClass('big3');



    });

     });
     </script>

   </div>



   </body>
   </html>

动画滑块 - 在背景淡入淡出后动画内容

0 个答案: