Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • Learn how to create a slider with animation effects using simple code of jQuery

    • 1
    • 0
    • 0
    • 0
    • 0
    • 0
    • 5
    • 0
    • 796
    Comment on it

    Hii,

    I had shared few example of animation effects using CSS and jQuery,This blog is continuation with my previous blogs on "animation effects" using CSS and jQuery

    Learn how to create a slider in html with different animation effects using CSS and Jquery.

    Go through the example below:

    HTML:

    1. <div id="slides">
    2. <div id="slide1" style="display:none;">
    3. <p>Slider1</p>
    4. <img style="width:940px;height:752px;" src="flower1.jpg">
    5. </div>
    6. <div id="slide2" style="display:none;"><p>Slider2</p><img style="width:940px;height:752px;" src="flower2.jpg"></div>
    7. <div id="slide3" style="display:none;"><p>Slider3</p><img style="width:940px;height:752px;" src="flower3.jpeg"></div>
    8. <div id="slide4" style="display:none;"><p>Slider4</p><img style="width:940px;height:752px;" src="flower4.jpg"></div>
    9. <div id="slide5" style="display:none;"><p>Slider5</p><img style="width:940px;height:752px;" src="flower5.jpeg"></div>
    10. </div>

    CSS:

    1. body{background-color:#B96B8D;}
    2. #slides{margin:0 auto;text-align:center;}

    jQuery:

    1. $("#slide1").fadeIn('slow').delay(3000).fadeOut('slow');
    2. var t2 = setTimeout(function(){
    3. $("#slide2").fadeIn('slow').delay(3000).fadeOut('slow');
    4. var t3 = setTimeout(function(){
    5. $("#slide3").fadeIn('slow').delay(1000).fadeOut('slow');
    6. var t4 = setTimeout(function(){
    7. $("#slide4").fadeIn('slow').delay(3000).fadeOut('slow');
    8. var t5 = setTimeout(function(){
    9. $("#slide5").fadeIn('slow');
    10. }, 6000);
    11. }, 10000);
    12. }, 6000);
    13. }, 6000);

    Note: Must include this link in your file

    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
    Learn how to create a slider with animation effects using simple code of jQuery

 0 Comment(s)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Reset Password
Fill out the form below and reset your password: