When the browser is resized, the fadeIn() function restarts from the

My plan was to create a dynamic effect where a browser-sized div would rotate through 3 different backgrounds using jQuery's fading effect. However, I encountered an issue - whenever I resize the browser window, the effect restarts from the beginning instead of continuing smoothly. I'm specifically facing this problem in Chrome version 37. Any guidance or suggestions on how to address this would be greatly appreciated.

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

Answer №1

To start, consider adding the following to your div.wrapinside CSS:

display: none;

Once you've done that, you can remove this line of code:

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

For additional help, check out this resource: Change background-image of a div with fade effect every 10 seconds with jQuery.

The issue lies in updating variables without adjusting the size of the div itself. This line of code:

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

is only executed once.

Here's a revised approach:


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 animate() {
        $(".wrap div.wrapinside").first().appendTo('.wrap').fadeOut(3000);
        $(".wrap div").first().fadeIn(3000);
        setTimeout(animate, 6000);
    }
    animate();
})
$(window).resize(function(){
    dg_H = $(window).height();
    dg_W = $(window).width();

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

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Node.js error: exceeding parameter limit encountered during bulk data upload

I've been tasked with uploading user data in bulk via a CSV file. I'm utilizing nodejs along with the express framework. Everything works smoothly when I upload a CSV file with 60 to 70 rows, but once it exceeds 70 rows, I start encountering a se ...

javascriptnode.jsbody-parser

Invoking a C++ dll in the renderer process of a Node.js application with Electron using node ffi

As I work on developing a windows application using electron, my goal is to utilize the ffi-napi to invoke C++ .dll methods. However, I am facing a challenge with the "Passing_Dll.js" file, where the label with id "GenName" is not being updated when clicki ...

javascriptc++node.jselectron

Is there a way to add 100 headings to a webpage without using a loop when the page loads

Just joining this platform, so please be patient with me! The task at hand is to insert 100 h3 headings on page load ("Accusation 1, Accusation 2, Accusation 3,...Accusation 100"). We are restricted to using only 1 loop throughout the lab, which will also ...

javascriptjquery

Why isn't the login redirect script working without any errors or redirection?

Struggling to develop a Greasemonkey script that can automatically fill in certain forms and then redirect to another URL once the form is submitted. // ==UserScript== // @name usersaime // @description fills data form for user and pass // @include h ...

javascriptgreasemonkeyuserscriptstampermonkey

DiscordJS: updating specific segment of JSON object

I am currently working on a Discord bot using discord.JS that involves creating a JSON database with specific values. I'm wondering how I can modify the code to edit a particular object within the JSON instead of completely replacing it. if (message.c ...

javascriptnode.jsjsondiscord.js

Image not showing up on HTML page following navigation integration

Having trouble with my responsive website setup - the background image for ".hero-image" isn't showing up after adding the navigation. Google Chrome console is throwing a "Failed to load resource: the server responded with a status of 404 (Not Found)" ...

javascripthtmlcss

Imagine a scenario where clicking on an image causes it to be rotated or

Could use some assistance figuring out what's missing here. I've added a random photo from Wiki, similar in size to the images I'll be working with. The images will vary in size, but I want them to always remain visible within the browser w ...

javascripthtmlcss

Excessive content - letter "y" disrupts the row layout on mobile devices

I have created a custom CSS class called "custom-class" and applied it to the col div. This column contains dynamic images, so I have added a vertical scrollbar property to handle the overflow. While everything looks fine on a desktop, the layout breaks o ...

htmlcssbootstrap-4

Step-by-step guide on creating a sequential glowing effect for list items with CSS and JQuery

I would like to create a glowing effect on each icon individually. The idea is for each icon to glow for a brief moment and then return to its normal state before moving on to the next icon in line. I am considering using text-shadow for the glow effect an ...

jquerycss

Launch all external links in Browser (NWjs)

While attempting to create my own independent version of Google Chat using NWjs, I encountered some obstacles. When a link is opened in the NWjs window, it opens in another NWjs window instead of the default system browser, which is what I want. I attemp ...

javascriptjquerynwjs

Adjusting the X-Axis Labels on a Scatterplot using Chart.js 2

I'm working with Chart.js 2 to create a scatter plot using Epoch timestamps for the x coordinates and integers for the y coordinates. Is there a way to customize the x-axis labels on the graph to show dates in a more readable format? Update: I am cur ...

javascriptchart.jschart.js2

What is the best way to retrieve the previously chosen item from an array?

I have successfully implemented dynamic pill tabs with one minor issue remaining. The most crucial aspect is that when I remove a pill, I want it to return to the previously opened tab. I have provided a StackBlitz example without routes on this page: -> ...

javascripthtmlcssangularangular-material

Having trouble with $addToSet and $push not working in updates using Mongoose with MongoDB in Node.js?

My issue involves Mongoose as I am attempting to update a document in MongoDB using the mongoose module. Below is my schema: var User = new mongoose.Schema({ name: String, email: String, list_houses: [{ id_house: S ...

javascriptnode.jsmongodbmongoose

The component data fails to reflect the updated value following a status change due to not properly retrieving the new result from the POST function

Below is the Vue.js 2 code snippet for sending data to the backend. The vuex library was used to manage the data status. After using the POST function, the result returned from the backend updates the value of sampleId. This value is auto-generated by the ...

javascriptvue.jsvuejs2vuex

When I use AJAX to load a PHP file, the function's content returns as [object HTMLDivElement]

Hello there, When I use AJAX to load a PHP file, the content of my function returns [object HTMLDivElement], but if I load my function without loading the PHP file, it displays normally. index.php <h1>API Football</h1> <nav> ...

javascriptarraysajaxapi

The angular controller function is failing to set $scope.value

I've been facing an issue with setting an Angular variable value in a controller function that is created by a directive. For some reason, it doesn't seem to work when I try to assign the value within the controller function, even though it displ ...

javascriptangularjsangularjs-directive

How can I prevent receiving redundant data and effectively manage my data?

I am currently working on adding offline support to my app. The logic I am following is to first check if there is cached feed data available. If the data is present, it will set the feeds to that cached data and display it from the cache. However, it will ...

javascriptreactjsreact-native

Is there a way for app.use to identify and match requests that begin with the same path?

Given that app.use() responds to any path that starts with /, why does the request localhost:3000/foo match the second method instead of the first? app.use("/",express.static('public'), function(req,res,next) { console.log(& ...

javascriptnode.jsexpress

How can I transfer data from two queries to Jade using Node.js (Express.js)?

I have a database with two tables - one for storing user information and another for managing friendship connections: setting up a friend list in mysql My goal is to create a profile page using Jade, specifically profile.jade: - each user in users ...

javascriptmysqlnode.jsexpresspug

"The power of Node JS in handling JSON data and gracefully

I'm having trouble extracting a specific part of a JSON object in Node JS. When I print the response body, the entire object is displayed correctly. However, when I try to access object.subsonic-response, it returns NaN. I've spent a lot of time ...

javascriptjsonnode.js