問題是,當動畫改變div noob背景時,其他div會運行其中的消失,然後重新出現。我想讓div noob內的div保持在他們的位置,但只有div noob改變的背景。我怎樣才能做到這一點。子divs消失,因爲父div的背景使用JQuery更改
我有以下代碼:
var currentBackground = 0;
var backgrounds = [];
backgrounds[0] = 'img/m1.jpg';
backgrounds[1] = 'img/m2.jpg';
backgrounds[2] = 'img/m3.jpg';
backgrounds[3] = 'img/m4.jpg';
backgrounds[4] = 'img/m5.jpg';
function changeBackground() {
currentBackground++;
if (currentBackground > 4) currentBackground = 0;
$('#noob').fadeOut(1500, function() {
$('#noob').css({
'background-image': "url('" + backgrounds[currentBackground] + "')"
});
$('#noob').fadeIn(1500);
});
setTimeout(changeBackground, 5000);
}
$(document).ready(function() {
setTimeout(changeBackground, 5000);
});
changeBackground();
.m_i {
float: left;
background-color: cyan;
width: 1366px;
height: 488px;
/*background-image: url(..//img/m1.jpg);*/
}
#hol {
width: 600px;
height: 90px;
margin-left: 383px;
margin-top: 194px;
}
.nam {
width: 600px;
height: 40px;
background-image: url(..//img/new.png);
float: left;
}
.but {
margin-top: 10px;
width: 600px;
height: 40px;
float: left;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="m_i" id="noob">
<div id="hol">
<div class="nam">
</div>
<div class="but">
<button id="bb">W E     A R E     C O R E X</button>
</div>
</div>
<div id="dd" class="local-scroll">
<a href="#yy" class="scroll-down"><i class="fa fa-angle-down scroll-down-icon"></i></a>
</div>
</div>
您能否整理一下您的代碼?這是不可讀的。如果您不知道如何使用[DirtyMarkup](https://dirtymarkup.com/),請使用[DirtyMarkup]。 – KarthaCoder