Question

我打算给浏览器大小的div提供3个背景，并使用jQuery的淡化效果旋转它。主要的问题是每当我调整浏览器大小时，效果都会重新开始，我希望它能够在确切的时刻在任何地方继续。我正在使用Chrome 37.我将不胜感激任何帮助或建议。

HTML

<div class="wrap">
    <div class="wrapinside" style="background: url(1.jpg) no-repeat center center;"></div>
    <div class="wrapinside" style="background: url(2.jpg) no-repeat center center;"></div>
    <div class="wrapinside" style="background: url(3.jpg) no-repeat center center;"></div>
</div>

的jQuery

$(window).load(function(){
$('div.wrapinside').hide();
var dg_H = $(window).height();
var dg_W = $(window).width();

$('.wrap').css({'height':dg_H,'width':dg_W});

function anim() {
    $(".wrap div.wrapinside").first().appendTo('.wrap').fadeOut(3000);
    $(".wrap div").first().fadeIn(3000);
    setTimeout(anim, 6000);
}
anim();})
$(window).resize(function(){window.location.href=window.location.href})

CSS

.wrap {
   position: fixed;
   z-index: -1;
   top: 0;
   left: 0;
   background: #000;
}   

.wrap div.wrapinside {
   position: absolute;
   top: 0;
   display: none;
   width: 100%;
   height: 100%;
   z-index: -1;
   background-size: cover;
}

Answer 1

首先，你可以将它添加到你的div.wrapinside css：

display: none;

之后你不再需要这个了：

$('div.wrapinside').hide();

也许这个链接也可以帮到你。 Change background-image of a div with fade effect every 10 seconds with jquery

问题是，您正在更新某些变量的值，而不是div本身的大小，因为这一行：

$('.wrap').css({'height':dg_H,'width':dg_W});

只执行一次。

试试这个：

var dg_H;
var dg_W;
$(window).load(function(){
dg_H = $(window).height();
dg_W = $(window).width();

$('.wrap').css({'height':dg_H,'width':dg_W});

function anim() {
    $(".wrap div.wrapinside").first().appendTo('.wrap').fadeOut(3000);
    $(".wrap div").first().fadeIn(3000);
    setTimeout(anim, 6000);
}
anim();})
$(window).resize(function(){
dg_H = $(window).height();
dg_W = $(window).width();

$('.wrap').css({'height':dg_H,'width':dg_W});
})

调整浏览器大小后，fadeIn（）重新开始

HTML

的jQuery

CSS

1 个答案: