Having trouble creating a fade out followed by a fade in effect on a div element. The fade out happens too quickly and the fade in interrupts it abruptly.
Here is the JavaScript code:
$('#fillBg').stop(true,false).fadeTo(3000, 0);
$("#fillBg").hide().attr('src', bgImage).stop(false,false).fadeTo(1500, 1.0);
Make sure to place any subsequent actions that should occur after the initial fadeTo animation within a callback function:
$('#fillBg').stop(false,false).fadeTo(3000, 0, function() {
$(this).hide().attr('src', bgImage).stop(false,false).fadeTo(1500, 1.0);
});
The issue lies with the 2nd instance of .stop. When you call stop, it interrupts the second fadeTo animation.
$('#changeBg').fadeOut(2000, function(){
$("#changeBg").attr('src', newBgImage).fadeIn(1000);
});
This code snippet guarantees that the fadeIn will execute only after the fade Out has finished.
If you want to apply a callback to the fadeTo method, here's how you can do it:
// Store in variable for better performance
var hideDiv = $('#background');
hideDiv.stop(false,false).fadeTo(3000, 0, function() {
hideDiv.hide().attr('src', backgroundImage).stop(false,false).fadeTo(1500, 1.0);
});
Alternatively, you can achieve the same effect using fadeIn and fadeOut:
// Store in variable for better performance
var hideDiv = $('#background');
hideDiv.fadeOut(3000, function() {
hideDiv.hide().attr('src', backgroundImage).fadeIn(1500);
});
$('#fillBg').stop(true,false).fadeTo(3000, 0, fadeIn);
function fadeIn()
{
$("#fillBg").fadeTo(1500, 1.0);
}
Objective: Testing the linting process of specific components within the source code, without affecting all files. I want to streamline the linting process by running a single command that covers multiple folders specified in a configuration file: //pack ...
In my code, I have a special Layout component that compares routing queries and displays the appropriate layout based on the query. I'm looking to extend this functionality to handle dynamic routing scenarios, such as invoices/invoice-1. Currently, ...
In my web page, I have a form to input times. The page is saved in flash memory and I want to update the times with previously stored values in EEPROM without loading the page into RAM. I prefer not to use websockets or AJAX for this purpose. I am looking ...
When trying to implement the Google Plus One button using AddThis on one of our localized pages, we encountered a strange issue. Despite retrieving data from the backend (let's assume a database), the plus button was not loading during an AJAX based p ...
By default, the script will always be executed regardless of its environment. Check out my code snippet: import { Pool } from 'pg'; import config from './../config'; const connectionString = () => { switch (process.env.NODE_EN ...
Link to the code snippet <td><input class="input" v-model="user.name" /></td> After accessing the provided link, I noticed a unique input textbox. Is there a way to extract specific text values like a,b,c from this te ...
I'm trying to figure out how to hide the hamburger menu when the screen width exceeds 400px. You can check out the site at damf.co Currently, the hamburger menu appears when the screen width is less than 400px. If you click on it and then expand the ...
Here's the scenario: I'm making an ajax post request to a controller action, which returns complete html source code. I want to print this html source as if it were being displayed in a browser without opening a new tab or window. Is there a way ...
Whenever I scroll up or down, there is a section on my page where I have implemented scroll magic. However, as I scroll through this section, it starts to jump until it reaches the position where I want it to be with transform:translateY(0). I am unsure h ...
Can you help me figure out what's going wrong with my code? I have an HTML page with a table where I fetch data from the web in JSON format using JavaScript. The logic works perfectly when the fetch code is let to run on its own, but when I try to ex ...
I have a situation where I need to transfer an array from a PHP file to an external JavaScript file. My approach involves using AJAX as it appears to be the most suitable method for achieving this. However, when I try to use echo json_encode($exif), the JS ...
I'm currently trying to retrieve the button value within an onChange event. My goal is to then bind this value to state, but unfortunately, I am receiving an empty value. <button onChange={this.handleCategoryName} onClick={this.goToNextPage}> ...
My goal is to connect individuals with each other by embedding a Match document in the user's matches array. This is my User Model: const mongoose = require('mongoose'); const Schema = mongoose.Schema; const Match = new Schema({ with: ...
Seeking a method for one-way (not one time) binding between an attribute on a directive without utilizing attrs.$observe. Currently considering binding via &attr and invoking the variables in the template like {{attr()}}. app.controller('MainCtrl ...
Is there a way to distinguish between the following three elements in ES6 using its reference? let x = i => i+1; class y { constructor(i) { this._i=i+1; } get i(){ return this._i;} } function z(i) { return i+1; } For example: test(x) //=> ' ...
The v-for directive is having trouble accessing the nStars prop in order to run a loop. I am attempting to display multiple stars by using the component <display-stars>. However, the component does not seem to be receiving the nStars prop for the loo ...
Can someone help me with my code? I am struggling to prevent duplicate data from being saved into an array. When I click on any two paragraph elements, the text inside them gets added to an array named `test`. However, I want to avoid saving the same tex ...
I encountered an issue with an input element in my HTML file. Here's what it looks like: <input type="file" (change)="receiveFile($event)" id="inputFileButton" hidden /> This input element is designed for users to import files. Wh ...
Is there a way to include ASP markup from a text file on the page? I am integrating the Azure Maps service into our project and need to have an ASP button within a popup displayed on pins. However, I am struggling to achieve this. We currently have a "te ...
In one of my child components, I have a component named Navbar that includes an option for logging out. <a @click="(event) => {event.preventDefault();}"> Logout </a> This Navbar component has been imported into my parent compon ...