changing pictures with jquery

Struggling with this code snippet:

$('#clicked_package').css({"background-image" : "url(img/head_2.png)"}).fadeOut("slow");
$('#clicked_package').css({"background-image" : "url(img/head_2_normal.png)"}).fadeIn("slow");

No matter which image I use in the first line, it always gets replaced by the second line. The initial image ends up being the same as the final one.

My goal is to smoothly fade out the original image and then fade in a new one.

Any suggestions on how to achieve this successfully? Thank you!

javascriptjquerycss

Answer №1

If you're looking to utilize the fadeOut function with a callback, consider using this version:

$('#clicked_package')
    .css({"background-image" : "url(img/head_2.png)"})
    .fadeOut("slow", function () {
        $(this).css({"background-image" : "url(img/head_2_normal.png)"})
            .fadeIn("slow");
});

For reference: http://jsfiddle.net/andrewwhitaker/VLRKy/

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

Adding a class to a TD element only when there is text in that TD as well as in other TD elements

I am facing a challenge where I need to add a new class to a td element, specifically the first one in the code snippet below. However, this should only happen if that td contains a certain number (e.g., "2") and if the next td contains some specific text ...

javascriptjquery

Implementing a Div response within the actionPerformed method

I've spent hours working on this javascript/ajax code trying to get it to add a div response that was echoed by a php script. Any assistance with this would be greatly appreciated. <form id="form1" name="form1" method="post" enctype="multipart/for ...

javascriptphpajax

When using Node.js and geth together, running JavaScript code may lead to the creation of zombie processes, causing the

Currently, I am utilizing a JavaScript code that connects to the web3 package on Ethereum's JSON RPC API. This code is designed to iterate through each transaction in an incoming block. If the transaction involves an internal wallet, it sends the rele ...

javascriptnode.jsgo-ethereum

What is the best way to assign a dynamic width to a block element?

In my project, I am working with 30 elements that have the class .lollipop and are styled with line-height: 30px; height: 30px;. <a class="lollipop">Random text</a> <a class="lollipop">Random text longer</a> <a class="lollipop"& ...

htmlcss

Exploring the possibilities of combining Selenium Code and F# with Canopy

Currently, I am facing the challenge of incorporating Selenium code into my F# project while utilizing the canopy wrapper. Canopy relies on Selenium for certain functions. My main struggle lies in converting Selenium code from Java or C# to fit within an ...

javascriptseleniumf#canopy-web-testing

Error encountered while using jQuery AJAX to fetch SVG file: 'Invalid format'

For a while now, I have been using various SVGs from Inkscape and loading them into a specific container element with the .load method. Recently, I decided to switch things up and use AJAX's .get method instead, primarily because I wanted to prepend t ...

javascriptjqueryajaxsvg

Exploring CSS3 animations: customizing animations for individual elements based on scroll movements

Can you help me with CSS3 animations triggered by scrolling? I came across a code that reveals a DIV element as the user scrolls down: <script type="text/javascript"> $(document).ready(function() { /* Every time the window ...

jquerycssanimationwebscroll

retrieving the file directory from a folder with the help of ajax

I am having trouble retrieving a list of files from a specific URL that lists files inside a folder: https://i.sstatic.net/VH22b.png In order to obtain this list of files using JavaScript, I have written the following code: $.ajax({ url: &ap ...

javascriptjqueryajax

Determining When to Apply max-height / max-width for Images in CSS

At what point should one consider using max-height or max-width for an image? Is it beneficial if I refrain from mentioning the specific dimensions of the image due to uncertainty? ...

htmlcss

Creating a dynamic and flexible div using CSS

I am currently working on a small webpage and encountering an issue with responsiveness when scaling the browser window in and out. The design looks perfect at 320x568 resolution, but when I scale it down, a black box (`.transbox`) overlaps the image, whic ...

htmlcssbootstrap-4

the button function is unresponsive

Can someone please help me troubleshoot my jQuery code? Everything seems fine, but the generate button is not working when clicked! PS: I've searched extensively for a solution to this problem but haven't been able to find one. I've also at ...

javascriptjquery

Tips for customizing the appearance of Angular Material select drop down overlay

In my project, there is an angular component named currency-selector with its dedicated css file defining the styling as shown below: .currency-select { position: absolute; top: 5px; right: 80px; z-index: 1000000; color: #DD642A; f ...

htmlcssangularangular-material2

What is the most effective method for enlarging elements using Javascript?

I have come across many different methods for expanding elements on webpages, such as using divs with javascript and jquery. I am curious to know what the most optimal and user-friendly approach is in terms of performance, among other things. For instance ...

javascriptjquerycsshtml

Generate a dynamic kendo dropdown with data sources assigned in separate methods

Creating a kendo dropdown list dynamically based on the number of received id's is presenting a challenge. A method has been implemented to loop through each id and generate a corresponding dropdown with that id. These dropdowns are not all generated ...

javascriptjquerykendo-ui

How can one overcome CORS policies to retrieve the title of a webpage using JavaScript?

As I work on a plugin for Obsidian that expands shortened urls like bit.ly or t.co to their full-length versions in Markdown, I encounter a problem. I need to fetch the page title in order to properly create a Markdown link [title](web link). Unfortunatel ...

javascripttypescriptcorsobsidian

What is the process of using JavaScript code to read a text file?

Trying to use Google Charts while reading data from a text file. The code in JS is written for this purpose: function readTextFile(file){ var rawFile = new XMLHttpRequest(); rawFile.open("GET", file, false); // using synchronous call var allTe ...

javascriptajaxgoogle-visualization

What is the best method to reset the chosen option in a dynamic select dropdown using React?

I have a form set up with a Select dropdown that is populated dynamically from the server. The issue I'm facing is that after selecting an option from the dropdown and then saving or canceling the form, the selected value remains in the field when I ...

javascriptreactjsdrop-down-menu

What steps can be taken to resolve the issue of "Access Denied: Invalid token, incorrect code"?

Assigned to me recently for a school project is a coding challenge that consists of various parts. The final task involves uploading to a private GitHub repository and submitting a completion request through a POST request under specific conditions. I hav ...

javascriptnode.jsjsonrfctotp

Can ngFor be utilized within select elements in Angular?

I'm facing an interesting challenge where I need to display multiple select tags with multiple options each, resulting in a data structure that consists of an array of arrays of objects. <div class="form-group row" *ngIf="myData"> <selec ...

javascripthtmlangulartypescript

Measuring Internet speed using Node.js

Is there a way to measure internet speed in server-side node.js? I am currently sending the current timestamp from the client side while making an http request. Client side code: var image = document.createElement("img"); image.width = 1; i ...

javascriptnode.jsexpressanalyticsweb-analytics