Using JQuery to swap out background images in CSS

I have been working on a slider that is supposed to fade one picture over another. The issue is that the background change seems to only work in the Dreamweaver preview and not in the actual browser.

loop = setInterval(function(){
    $("#slider").css("background-image" , "url(/slider" + x + ".jpg)");
    $("#slider > img").fadeOut(2);
    $("#slider > img#" + y).fadeIn(3000);
}, 4000)

Essentially, the process should be: Set the background image, fade out the old picture, fade in the new picture over the background, and repeat. However, I am struggling to figure out why the background isn't being set or displayed correctly.

Answer №1

To modify the image, simply update the src attribute using this code:

$("#slider > img").attr('src', y);
. For a visual example, refer to this jsfiddle demo.

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

Organize an array of objects with underscore.js to arrange them in a

I have an array of objects that looks like this: profData=[{"Details":{"CODE":"PAT4PAS","DESCRIPTION":"PASTIE 4N20 12 X 175G","LOCATION":"FREEZER","UNITS":"BOX","WAREHOUSE":"00","AVAILABLE":"15.0000","ON_HAND":"15.0000","BRAND":"4N20","PRICE1":"18.80"," ...

I am unable to save the data received from the payment API

I've been working on developing an e-commerce system, but I'm facing an issue with the iyzipay payment API. Although I successfully make a request and receive a response from the server, I'm unable to store the data that comes back. Can anyo ...

Troubleshooting: Next JS 13/14 - Server component failing to update data upon revisiting without requiring a refresh

After attempting to retrieve the most recent liked items from a server component in next, I noticed that the data only displays when manually refreshing the page. Even when I navigate away and return, the data is not refetched automatically - however, usin ...

Guide to using Razor syntax in JQuery to effortlessly redirect to a different page

$(".category-sub-opition-list li").click(function () { var id = $(this).attr("id"); var category = getUrlParameter('category'); @{ var category = Request.QueryString["category"]; var cat = Model.Ite ...

Error message: Unable to locate the 'npm' task in Visual Studio Code

When attempting to execute a JavaScript or Python file in VS Code, an error message consistently pops up: Even after reinstalling node, the issue persists. Clicking on configure reveals various options, each leading me to a json file. New to coding, I ma ...

Requesting the json data through an Ajax call

I am currently working on implementing an AJAX call to handle the response received from a JSON file. Here is the HTML snippet: <div id = "tabs"> <ul> <li><A href="#ed_pro">Product Category</A> </li> <li><A hr ...

Tips for keeping an image at a fixed size within a grid, even when the browser window is resized

As a newcomer to front end coding, I am currently working on a practice website to familiarize myself with the code. One issue I am facing is related to using a bootstrap grid with an image in the left column. I want to prevent the image size and position ...

Converting this HTML/PHP code into JavaScript: A step-by-step guide

I have been struggling to convert this code into JavaScript in order to set the document.getElementById().innerHTML and display it in HTML. Can anyone assist with writing this code in JavaScript? <form action='create_new_invoice.php?name="<?php ...

Can you explain the distinction between $scope.$root and $rootScope?

When looking at controllers, I noticed that $scope includes $root. Can you explain what $root is and how it differs from the $rootScope that can be injected into the controller? ...

Deselect the "Check All" box if any individual checkbox in unchecked

I've been working on a small project that's almost complete. However, I'm having trouble with the checkall checkbox feature. It works fine when checking all the checkboxes, but if I uncheck just one checkbox in my tbody, the checkall checkbo ...

Error occurred while making a request in React using Axios: TypeError - Unable to retrieve the 'token' property as it is undefined

After successfully receiving a token from logging in with React Redux, I attempted to authorize it using the token. However, an error occurred stating Axios request failed: TypeError: Cannot read property 'token' of undefined. The token is stored ...

jQuery-powered automatic horizontal scrolling

Does anyone know of a jQuery plugin that allows for scrolling of a div element when hovering over an arrow? The desired functionality is similar to the following image: , where the content inside automatically scrolls left or right when the user hovers ove ...

Upon upgrading to webpack 5.x, I encountered the error message `Error: getaddrinfo ENOTFOUND localhost:8081` when trying to run `npm run serve`. What could be causing

Recently, I was tasked with upgrading a Vue project from webpack 4.x to webpack 5.x. Prior to the upgrade, my vue.config.js file looked like this: devServer: { port: 8081, public: process.env.PUBLIC_ADDRESS, }, The variable PUBLIC_ADDRESS was defined ...

The prop HandleClick is not being identified

Whenever I click on the sidebar, my menu should appear, but instead I'm encountering an error message saying "react-dom.development.js:86 Warning: React does not recognize the handleClick prop on a DOM." import { useState } from "react"; imp ...

Disappearance of background image on HTML5 canvas upon mouse movement

I am looking to incorporate the ability for users to draw sketches on an image displayed on a canvas. Currently, I am utilizing the sketch.js jQuery library and have encountered the following issues: The image loads successfully onto the canvas. However, ...

Is it possible to obtain the current photo ID within a prettyphoto gallery?

When using PrettyPhotos to display a slideshow and lightbox, I'm trying to figure out how to get the current photo ID that is showing in the Lightbox. While PrettyPhotos offers a callback function called changepicturecallback, I attempted to use it bu ...

The user can witness the appearance of a scrollbar when utilizing the

Struggling to remove the scroll bar from my ion-scroll. Have tried various methods but nothing seems to work. Need assistance with this, please! Attempted using all attributes and even used CSS like ::-webkit-scrollbar with display: none;, which hides it ...

Comparison between Mobile Phone's innerWidth and innerHeight Versus Resolution

My test phone, the Galaxy S3 Mini, has a resolution of 800x480 according to its specs. Strangely, when I run the following code in my HTML game: window.innerWidth window.innerHeight The width appears as 533 and the height as 295. I recently discovered ...

Is it possible to alter the page color using radio buttons and Vue.js?

How can I implement a feature to allow users to change the page color using radio buttons in Vue.js? This is what I have so far: JavaScript var theme = new Vue({ el: '#theme', data: { picked: '' } }) HTML <div ...

Glitch in Mean App: front-end feature malfunctioning during data storage in mongodb

I am encountering difficulties while working on a MEAN app. I attempted to establish a connection between the backend (Node.js, Express.js) and the frontend (Angular 6), but encountered some issues. The backend port is http://localhost:3000, and the fron ...