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

Creating a row of aligned card components in React

Recently, I began learning React and successfully created a card component using Material UI. However, this time around, I'm attempting to create it using axios and map() methods. I expected the cards to be displayed in the same row horizontally, not ...

javascriptreactjsecmascript-6material-uifrontend

Leveraging CasperJS in a typical JavaScript script

I am currently working on a NodeJS project that involves integrating CasperJS. However, I have encountered an issue where the 'casper' module cannot be located. In an attempt to resolve this, I decided to npm install spooky --save based on some s ...

javascriptnode.jscasperjsspookyjs

Linking states using AngularJS and jQuery

Imagine I have a scenario with two different states: .state('page1', { url: '/page1', templateUrl: 'pages/templates/page1.html', controller: 'page1' }) .state('page2', { url: '/page2& ...

javascriptjqueryangularjsangular-ui-router

The data is not being successfully transmitted to the controller method through the AJAX call

In my JavaScript file, I have the following code: $(document).ready(function () { $('#add-be-submit').click(function (event) { event.preventDefault(); $.ajax({ type: 'POST', url: '/snapdragon/blog/new&apos ...

javascriptjavajqueryajaxspring-mvc

Creating Json for jsTree can be done by following these steps

Yesterday, I stumbled upon the versatile jsTree plugin and was really impressed. Does anyone happen to have a SQL sample that creates JSON data for it? ...

jquery

What approach is most effective for creating a cxjs widget using a jquery plugin?

Looking to transition an older jQuery application that utilizes jQuery D3 charts. What would be the most effective method for encapsulating jQuery $ components within cxjs widgets? I attempted to follow the guidance at https://reactjs.org/docs/integrating ...

jquerycxjs

ng-repeat displaying an empty list

Currently, I am working on an AngularJS application where I am attempting to display data retrieved using the http get method from a RESTServer. The GET request is sent from one view and upon success, it navigates to another view within AngularJS. Both vi ...

javascriptangularjs

Is it possible to write a text file in UTF-16 using Javascript?

I need to create a UTF-16 text file from a string. For instance: var s = "aosjdfkzlzkdoaslckjznx"; var file = "data:text/plain;base64," + btoa(s); The above code generates a UTF-8 encoding text file. How can I modify it to produce a UTF-16 text file usin ...

javascriptutf-16

Having trouble showing the fa-folders icon in Vuetify?

Utilizing both Vuetify and font-awesome icons has been a successful combination for my project. However, I am facing an issue where the 'fa-folders' icon is not displaying as expected: In the .ts file: import { library } from '@fortawesome/ ...

javascripttypescriptvue.jsvuetify.jsfont-awesome

With Vue's new implementation of adding data attributes to the "*" selector, how can I adapt to this change?

Typically, I reset all margins/paddings by including the following code snippet at the beginning of my CSS: *, body { margin: 0; padding: 0; } This method usually works fine since it is overridden by subsequent selectors. However, Vue appends data att ...

cssvue.jsbuild

Exploring ways to check async calls within a React functional component

I have a functional component that utilizes the SpecialistsListService to call an API via Axios. I am struggling to test the async function getSpecialistsList and useEffect functions within this component. When using a class component, I would simply cal ...

javascriptreactjsfrontendreact-testing-library

Is it possible for me to create a distinct component that can display numerous input fields at once?

Introducing the inputArea component, which collects data from input fields and sends it to the server: export default class InputArea extends React.Component { constructor(props){ super(props); this.state = { draw_number: '', ...

javascriptreactjs

Changing the alignment of divs to center instead of the right side

I am currently working on a project that involves creating a tiled interface with responsive tiles. One issue I have encountered is that all the tiles are shifting to the left side of the div and not getting centered, no matter what I try. To see the pro ...

htmlcssalignmentcss-floatmargin

Tips for creating ternary operator logic that account for numerous conditions and optional parameters:

Trying to create a logic for my validator functions that involves using objects as errorMaps for input validation. In the code snippet provided, args.drugName is an optional field. If the user provides text, we want to ensure it is greater than 3 letters; ...

javascriptangulartypescript

Expanding the boundary with Material-UI: Tips for stretching the margin

I am currently working on creating a navigation bar using Material UI, and the current layout can be seen in the image below. https://i.stack.imgur.com/AOy3v.png While following the template provided by MUI documentation, I encountered an issue with alig ...

javascriptreactjsmaterial-uinavbarmargin

Modifying Names and Job Titles to Appear Beneath Images in HTML and CSS

Is there a way to update names and job titles directly below the images? To find out more, click on this link ...

htmlcss

Issue with excessive content causing scrolling difficulty

I've created CSS for a modal dialog, but I'm facing an issue. When the content exceeds the vertical space of the wrapper, the scrolling functionality doesn't work correctly. Although I can scroll, it's limited and I can't reach th ...

htmlcss

What is the best way to reset an a-select component in Ant Design Vue?

I need to programmatically reset the selection in my a-select component after a specific event is triggered. Here's an example of my a-select code snippet: <a-select style="marginTop: 8px;width: 20%" @change="onChanged" > ...

javascriptvue.jsantd

Tips for positioning the avatar to the right along with other links?

I've encountered various methods to align text or an image to the right, but I'm having trouble aligning a basic avatar with some text. It used to work before I switched to material-ui-next, and now I can't seem to get them aligned properly. ...

htmlcssreactjsmaterial-uiavatar

updateStatusCallback function is not defined in the Facebook example using jQuery

I've been trying to incorporate Facebook integration into my HTML code, specifically adding features like Facebook login and sharing functionalities. However, I've hit a roadblock in the process. Even after searching extensively for solutions, I ...

javascriptjqueryhtmlajaxfacebook