如何在jQuery中更改.animate（）之后的背景图像不透明度？

Question

我正在使用jQuery animate(函数，它包含以下内容。

$(document).ready(function(){ 
    setInterval(function(){ 
        $("#animate1").fadeIn('slow').animate({
            'margin-left': '150px',
            'margin-bottom': '50px'
        }, 2000).fadeOut();

        $("#animate1").fadeIn('slow').animate({
            'margin-bottom': '0px',
            'margin-left': '-140px'
        }, 2000).fadeOut();
    }, 300);
});

<div style="background-image:url('img/sofa.jpg');">
    <div id="animate1">
        <img src="img/chotu.png" style="height:200px; width:200px;"/>
    </div>
</div>

我想如下更改background-image不透明度：

$("#animate1").fadeIn('slow').animate({
    'margin-left': '150px',
    'margin-bottom': '50px'
}, 2000)./* change bg-opacity here */.fadeOut();

可能吗？ 我只想在执行第一个动画功能后更改背景图像的不透明度。

Answer 1

<body>
    <div id="bg"></div>
    ...
</body>

您可以使用CSS将其设置为与页面一样宽：

#bg {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

然后对其属性进行动画处理。

$('#bg')
    .animate({opacity: 0}, 'slow', function() {
        $(this)
            .css({'background-image': 'url(1.jpg)'})
            .animate({opacity: 1});
    });

通过将图像的不透明度渐变为0，然后更改背景图像，最后再次使图像渐变，您可以获得类似的效果。

通过在该背景之上添加第二个背景div，您可以获得更多的交叉效果，然后可以淡入。

如何在jQuery中更改.animate（）之后的背景图像不透明度？

问题描述

1 个解决方案

解决方案1
0 2016-11-05 12:18:32

如何在jQuery中更改.animate（）之后的背景图像不透明度？

问题描述

1 个解决方案

解决方案1 0 2016-11-05 12:18:32

解决方案1
0 2016-11-05 12:18:32