在Javascript中更改图像[重复]

【问题标题】：Changing images in Javascript [duplicate]在Javascript中更改图像[重复]
【发布时间】：2014-11-10 23:26:27
【问题描述】：

我有这个脚本可以很好地更改图像，但并不顺利。我怎样才能改变这个，让他们顺利地改变？

//--------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")+')');

    }
}

【问题讨论】：

定义smoothly，这里是一个模糊的词。衰退？尺码？
@ErikPhilips 如果您注意到.fadeOut()，您就会知道 efx OP 想要什么。问题只是淡入淡出不适用于背景图像更改 (.attr("style",'background-image)。
请把完整代码和html代码放在jsfiddle.net上进行跟踪

标签： javascript jquery

【解决方案1】：

$().fadeOut();适用于元素，而不是背景。

如果你想为 CSS 属性设置动画，最好的办法是使用jQuery.animate()；

【讨论】：

让两个图层相互重叠，将当前图像设置为最前面，下一个图像设置为后面的图层，然后您可以使用$('#currentDiv').animate({backgroundPositionX: '-100%'})之类的东西将图像滑出，或者@987654323 @ 淡出它
$().fadeOut(); 在动画完成后设置style="display: none;"，如果相关元素的容器具有auto 高度，这将导致容器的高度发生变化，这在某些情况下通常是不需要的例如横幅滑块。
如果您在父对象上设置了固定宽度/高度 + position: relative，那么您可以在其子对象（幻灯片）上设置position: absolute，然后子对象将不会相互堆叠并会叠加而是互相代替。