0

I have this script that changes images fine, but not smoothly. How can I change this so they change smoothly?

//--------AutoPlay select--------------------------
function autoPlaySlider(id){

    var recNumber = parseInt(id)+1;

    if(jQuery("#simg_"+recNumber).length){ 

        jQuery("#rt-header-surround")
            .attr("style",'background-image:url('+jQuery("#simg_"+recNumber).attr("imgpath")+')');

    }else{

        jQuery("#rt-header-surround")
            .fadeOut()
            .attr("style",'background-image:url('+jQuery("#simg_"+lastone).attr("imgpath")+')');

    }
}
Jack
  • 9,151
  • 2
  • 32
  • 44
TravelAndy
  • 1
  • 3

1 Answers1

-1

$().fadeOut(); applies to the element, not it's background.

If you want to animate CSS properties your best bet is to use jQuery.animate();

wyqydsyq
  • 1,992
  • 1
  • 20
  • 28
  • Have two layers overlaying each other, set the current image to the front one, the next image to the behind layer, you can then use something like `$('#currentDiv').animate({backgroundPositionX: '-100%'})` to slide the image out, or `$('#currentDiv').animate({opacity:0})` to fade it out – wyqydsyq Nov 10 '14 at 23:49
  • `$().fadeOut();` sets `style="display: none;"` after the animation completes, if the container of the element in question has `auto` height, this will cause the container's height to change which usually isn't desired in cases such as a banner slider. – wyqydsyq Nov 11 '14 at 01:35
  • If you set fixed width/height + `position: relative` on the parent you could then `position: absolute` on it's children (the slides) and then the children won't stack on each other and will layer over each other instead. – wyqydsyq Nov 11 '14 at 05:56