How to remove Opcity from the JQuery Slider

Question

I am using jquery for my image slider. My slider is working fine but there is one problem. When picture swap with each other i can see the reflection of last picture on the current picture due to opacity , I want that when new picture comes in the Slider there should be no reflection of last picture, here is my code

    <script type="text/javascript" src="jquery-1.2.6.min.js"></script>
    <script type="text/javascript">
    function slideSwitch() {
        var $active = $('#slideshow IMG.active');

        if ( $active.length == 0 ) $active = $('#slideshow IMG:last');

        // use this to pull the images in the order they appear in the markup
        var $next =  $active.next().length ? $active.next()
            : $('#slideshow IMG:first');

        // uncomment the 3 lines below to pull the images in random order

        // var $sibs  = $active.siblings();
        // var rndNum = Math.floor(Math.random() * $sibs.length );
        // var $next  = $( $sibs[ rndNum ] );


        $active.addClass('last-active');

        $next.css({opacity: 1.0})
            .addClass('active')
            .animate({opacity: 1}, 1000, function() {
                $active.removeClass('active last-active');
            });
    }

    $(function() {
        setInterval( "slideSwitch()", 3000 );
    });

    </script>
<div id="slideshow">  
    <img src="FrontPage Images/background2.png"  style="width: 1158PX;
left: 0px;
top: 0px;
height: 230px;"/>
    <img src="FrontPage Images/background3.png"  style="width: 1158PX;
left: 0px;
top: 0px;
height: 230px;" />
     <img src="FrontPage Images/background4.png" style="width: 1158PX;
left: 0px;
top: 0px;
height: 230px;"/>
</div>

Answer 1

Try using this code so that your images will fade and loop smoothly:

jQuery:

$(document).ready(function ()
{
var change = function()
{
    var current = ($('div.contain img.show') ? $('div.contain img.show') : $('div.contain img:first'));
    if (!current.length) current = $('div.contain img:first');
   var next = ((current.next().length) ? ((current.next().hasClass('show')) ? $('div.contain img:first') : current.next()) : $('div.contain img:first'));

   // var $active = $('#slideshow IMG.active');

   /*

    if ( $active.length == 0 ) $active = $('#slideshow IMG:last');


    // use this to pull the images in the order they appear in the markup
    var $next =  $active.next().length ? $active.next()
        : $('#slideshow IMG:first');

    // uncomment the 3 lines below to pull the images in random order

    // var $sibs  = $active.siblings();
    // var rndNum = Math.floor(Math.random() * $sibs.length );
    // var $next  = $( $sibs[ rndNum ] );

    */

    // $active.addClass('last-active');

    next.css({opacity: 0.0})
        .addClass('show')
        .animate({opacity: 1.0}, 1000);
         current.animate({opacity: 0.0}, 1000) 
            .removeClass('show');

};

var thebackground = function ()
{
$('div.contain img').css(
{
    opacity: 0.0
});
$('div.contain img:first').css(
{
    opacity: 1.0
});
setInterval(function () {change()}, 5000);
}
 thebackground();
 $('div.contain').fadeIn(1000); // works for all the browsers other than IE
 $('div.contain img').fadeIn(1000); // IE tweak
});

jFiddle demo here: http://jsfiddle.net/LynchJustRules/g2tLn/6/