[英]jQuery fade animation not doing what I want
I am trying to make the background image fade in and out with a dissolve effect. 我正在尝试使背景图像淡入淡出并具有溶解效果。
$(window).load(function() {
var i =0;
var images = ['http://ascendspa.com/wellness/wp-content/uploads/2014/07/Vayo-Massage.jpg?w=261&h=196&crop=1','http://massagehaveneagan.webstarts.com/uploads/massage.jpg'];
var image = $('#bg');
//Initial Background image setup
image.css('background-image', 'url(http://massagehaveneagan.webstarts.com/uploads/massage.jpg');
//Change image at regular intervals
setInterval(function(){
image.fadeOut(1000, function () {
image.css('background-image', 'url(' + images [i++] +')');
image.fadeIn(1000);
});
if(i == images.length)
i = 0;
}, 5000);
});
here is the html 这是HTML
<div id="bg">
<div class="container">
<div class="row">
<div class="col-sm-7 col-lg-7 main">
<h1>Get A Massage Today!</h1>
</div>
<div class="col-sm-5 col-lg-5 main1 order">
<h2>Make an Appointment Today!</h2>
<button class="btn btn-primary btn-large dropdown-toggle" type="button" data-toggle="dropdown">Haircut <span class="caret"> </span></button>
<button class="btn btn-primary btn-large dropdown-toggle" type="button" data-toggle="dropdown">Massage <span class="caret"> </span></button>
<button class="btn btn-primary btn-large dropdown-toggle" type="button" data-toggle="dropdown">Healing <span class="caret"> </span></button>
<p class=hometext>Get the pampering you deserve. We offer haircuts, massages, and more.</p>
</div>
</div>
</div>
</div>
Problem: Everything in the div, including the text and buttons fade in and out. 问题:div中的所有内容(包括文本和按钮)都会淡入和淡出。
Question: I just want to have the background image change. 问题:我只想更改背景图像。
It's because you're fading the entire element - it's working exactly how it's intended. 这是因为您正在淡化整个元素-它正按预期工作。
Nest the element containing only the background-image as a child element. 将仅包含背景图像的元素嵌套为子元素。 Something like: 就像是:
#bg {
position: relative;
}
#bg .bg-image {
position: absolute;
top:0;left:0;
width:100%;height:100%;
}
then run .fadeOut
on the .bg-image
element 然后在.bg-image
元素上运行.fadeOut
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.