javascript - Fade in and Out on Slider Image - Stack Overflow

admin管理员组

文章数量:1414621

I am trying to have the slider images fade into one another as opposed to fading to the background, and then loading the next image.

The slider can be seen at

This is what I have

$("#featured > ul").tabs({fx:{opacity: "toggle"}}).tabs("rotate", 5000, true);

<div id="featured" >
                    <ul class="ui-tabs-nav">
                        <li class="ui-tabs-nav-item" id="nav-fragment-1">
                        <a href="#fragment-1"><span>Cloud<br />Services</span></a>
                    </li>
                        <li class="ui-tabs-nav-item" id="nav-fragment-2">
                        <a href="#fragment-2"><span>IT &amp; Network<br />Support</span></a>
                    </li>
                        <li class="ui-tabs-nav-item" id="nav-fragment-3">
                        <a href="#fragment-3"><span>Security</span></a>
                    </li>
                        <li class="ui-tabs-nav-item" id="nav-fragment-4">
                        <a href="#fragment-4"><span>Service 4</span></a>
                    </li>
                    </ul>
            <!-- First Content -->
            <div id="fragment-1" class="ui-tabs-panel"><img src="<?php bloginfo('template_directory'); ?>/images/slider1.jpg" alt="Brash Concepts | Image Not Found" width="700" height="320" /> </div>
            <!-- Second Content -->
            <div id="fragment-2" class="ui-tabs-panel"><img src="<?php bloginfo('template_directory'); ?>/images/slider2.jpg" alt="Brash Concepts | Image Not Found" width="700" height="320"/> </div>
            <!-- Third Content -->
            <div id="fragment-3" class="ui-tabs-panel"><img src="<?php bloginfo('template_directory'); ?>/images/slider3.jpg" alt="Brash Concepts | Image Not Found" width="700" height="320"/> </div>
            <!-- Fourth Content -->
            <div id="fragment-4" class="ui-tabs-panel"><img src="<?php bloginfo('template_directory'); ?>/images/slider4.jpg" alt="Brash Concepts | Image Not Found" width="700" height="320"/> </div>
                </div>

I am trying to have the slider images fade into one another as opposed to fading to the background, and then loading the next image.

The slider can be seen at http://bit.ly/Vbfq2W

This is what I have

$("#featured > ul").tabs({fx:{opacity: "toggle"}}).tabs("rotate", 5000, true);

<div id="featured" >
                    <ul class="ui-tabs-nav">
                        <li class="ui-tabs-nav-item" id="nav-fragment-1">
                        <a href="#fragment-1"><span>Cloud<br />Services</span></a>
                    </li>
                        <li class="ui-tabs-nav-item" id="nav-fragment-2">
                        <a href="#fragment-2"><span>IT &amp; Network<br />Support</span></a>
                    </li>
                        <li class="ui-tabs-nav-item" id="nav-fragment-3">
                        <a href="#fragment-3"><span>Security</span></a>
                    </li>
                        <li class="ui-tabs-nav-item" id="nav-fragment-4">
                        <a href="#fragment-4"><span>Service 4</span></a>
                    </li>
                    </ul>
            <!-- First Content -->
            <div id="fragment-1" class="ui-tabs-panel"><img src="<?php bloginfo('template_directory'); ?>/images/slider1.jpg" alt="Brash Concepts | Image Not Found" width="700" height="320" /> </div>
            <!-- Second Content -->
            <div id="fragment-2" class="ui-tabs-panel"><img src="<?php bloginfo('template_directory'); ?>/images/slider2.jpg" alt="Brash Concepts | Image Not Found" width="700" height="320"/> </div>
            <!-- Third Content -->
            <div id="fragment-3" class="ui-tabs-panel"><img src="<?php bloginfo('template_directory'); ?>/images/slider3.jpg" alt="Brash Concepts | Image Not Found" width="700" height="320"/> </div>
            <!-- Fourth Content -->
            <div id="fragment-4" class="ui-tabs-panel"><img src="<?php bloginfo('template_directory'); ?>/images/slider4.jpg" alt="Brash Concepts | Image Not Found" width="700" height="320"/> </div>
                </div>

• javascript
• jquery
• slider
• fading

Share Improve this question Follow asked Feb 11, 2013 at 17:21 EratosthenesEratosthenes 7311 silver badge88 bronze badges 2

• Off the top of my head, you could try fading in the next image prior to fading out the previous image, and modify the z-indexes at each fade to ensure the image fading in is on top. – MildWolfie Commented Feb 11, 2013 at 17:31
• Thank you for your replies, but I need to be able to have the tab feature along with the sliding banner. I want users to be able to click on each individual tab (located along the right side of the slider as seen on the link above) to navigate to specific slides. – Eratosthenes Commented Mar 6, 2013 at 16:21

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 4 +25

You can easily use something like FlexSlider to create your slider. Every slides will be positionned one over the other so that when you change slide, there will be a "cross fade" between them.

Here's a code example of what you could try :

<!-- Place somewhere in the <body> of your page -->
<div class="flex-controls"></div>
<div class="flexslider">
  <ul class="slides">
    <li>
      <img src="<?php bloginfo('template_directory'); ?>/images/slider1.jpg" alt="Brash Concepts | Image Not Found" width="700" height="320" /> 
    </li>
    <li>
      <img src="<?php bloginfo('template_directory'); ?>/images/slider2.jpg" alt="Brash Concepts | Image Not Found" width="700" height="320" /> 
    </li>
    <li>
      <img src="<?php bloginfo('template_directory'); ?>/images/slider3.jpg" alt="Brash Concepts | Image Not Found" width="700" height="320" /> 
    </li>

    <li>
      <img src="<?php bloginfo('template_directory'); ?>/images/slider4.jpg" alt="Brash Concepts | Image Not Found" width="700" height="320" /> 
    </li>
  </ul>
</div>

<!-- Place in the <head>, after the three links -->
<script type="text/javascript" charset="utf-8">
  $(window).load(function() {
    $('.flexslider').flexslider(
        pauseOnAction: false,
        pauseOnHover: true, 
        slideshowSpeed: 5000,
        controlsContainer: '.flex-controls' //you could also use custom controls
    );
  });
</script>

a) put the different slides on top of each other using absolute positioning and z-indexes, or
b) put the images in one wrapper, which gets the current image's src as a background-image each time it is about to show the next image. hiding the image will then have no visual difference, load the new image and as soon as its ready, fade it in

thats basically how all sliders work, for example jquery cycle, flexslider, nivoslider, etc.

Made a plugin for this. A very straight forward basic slider. The "last" list item is animated with fadeOut and after the animation the item is re-positioned into the "first" position with prependTo()

The heart of the code:

cycle : function(slide) {
            var parent = $(slide).parent();
            $(slide).prependTo(parent)
            $(slide).css({
                display : 'block'
            });
        },
fadeToNext : function(obj, options) {
                $(obj).children().last().delay(options.delay).fadeOut(options.transitionTime, function() {
                methods.cycle(this);
                methods.fadeToNext(obj, options);
            });

        }

I put it on fiddle, so you can play around with it and see what it does. http://jsfiddle/djwave28/mwPSB/18/

I also added some ments of settings that you can change that make it visible of what actually occurs with the list during animation.

本文标签： javascriptFade in and Out on Slider ImageStack Overflow