fadeIn(）在调整浏览器大小后重新启动

fadeIn() starts over after resizing browser

本文关键字：重新启动 浏览器 调整 fadeIn      更新时间：2023-09-26

我打算给一个浏览器大小的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;
}

首先，您可以将其添加到您的div.wrapinside css中：

display: none;

之后你就不再需要这个了：

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

也许这个链接也可以帮助你。使用jquery 每隔10秒更改一个具有渐变效果的div的背景图像

问题是，您正在更新一些变量的值，而不是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});
})
相关文章：