fadeIn() starts over after resizing browser

Question

I was going to give 3 backgrounds to a browser-sized div rotating it with jQuery's fading effect. The main problem is whenever I resize the browser, the effect starts over, and I want it to continue wherever it is at the exact moment. I am using Chrome 37. I would appreciate any help or suggestions.

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;
}

It's something about `$(window).resize(function(){window.location.href=window.location.href})` — balintpekker, Aug 28 '14 at 12:45
What's that line for? I think the window.location will be upated on it's own, doesn't it? — 0lli.rocks, Aug 28 '14 at 12:49
Nope, if I take it out, and resize the window, the background stays where it is, and the window is cropping it out. But if I take it out the animation won't start over. — balintpekker, Aug 28 '14 at 12:50

score 1 · Accepted Answer · edited May 23 '17 at 12:26

First of all you could add this to your div.wrapinside css:

display: none;

After that you won't need this anymore:

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

Maybe this link could help you, too. Change background-image of a div with fade effect every 10 seconds with jquery

The problem is, that you are updating the value of some variables, but not the size of the div itself, because this line:

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

is only execute once.

Try this:

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});
})

Thanks for the suggestion of changing the JS code to CSS. The resize function checks the browser's size, and give a `width` and a `height` attribute to the .wrap div to resize the background-image. — balintpekker, Aug 28 '14 at 12:49
global variables are bad, but try if it helps and than change it. — 0lli.rocks, Aug 28 '14 at 12:58

fadeIn() starts over after resizing browser

HTML

jQuery

CSS

1 Answers1