Transition smoothly from the background image to hover effects

Is there a way to smoothly transition my background image on hover using jQuery?

Here is my current code snippet:

    <ul style="top: -70px; display: block; padding-left: 205px;" id="cats-menu" class="nav superfish sf-js-enabled">
    <a href="http://www.ballpointtech.com/category/guides/"></a><li id="li_guides" onclick="window.location = 'http://www.ballpointtech.com/category/guides/';"><a href="http://www.ballpointtech.com/category/guides/"> </a></li>

    <a href="http://www.ballpointtech.com/category/news/"></a><li id="li_news" onclick="window.location = 'http://www.ballpointtech.com/category/news/';"><a href="http://www.ballpointtech.com/category/news/"> </a></li>
    <a href="http://www.ballpointtech.com/category/reviews/"></a><li id="li_reviews" onclick="window.location = 'http://www.ballpointtech.com/category/reviews/';"><a href="http://www.ballpointtech.com/category/reviews/"> </a></li>
    <a href="http://www.ballpointtech.com/category/tipstricks/"></a><li id="li_tipstricks" onclick="window.location = 'http://www.ballpointtech.com/category/tipstricks/';"><a href="http://www.ballpointtech.com/category/tipstricks/"> </a></li>
</ul>

    <style type="text/css">
    #li_guides {
        background-image:url('http://www.ballpointtech.com/wp-content/uploads/2010/09/Guides-Still1.png');
        width:130px;
        height:92px;    
}
    #li_guides:hover {
        background-image:url('http://www.ballpointtech.com/wp-content/uploads/2010/09/Guides-Rollover1.png');
    }
#li_guides:active {
        background-image:url('http://www.ballpointtech.com/wp-content/uploads/2010/09/Guides-Click2.png');
    }
#li_reviews {
        background-image:url('http://www.ballpointtech.com/wp-content/uploads/2010/09/Reviews-Still.png');
        width:130px;
        height:92px;    
}
    #li_reviews:hover {
        background-image:url('http://www.ballpointtech.com/wp-content/uploads/2010/09/Reviews-Rollover.png');
    }
#li_reviews:active {
        background-image:url('http://www.ballpointtech.com/wp-content/uploads/2010/09/Reviews-Click.png');
    }
#li_news {
        background-image:url('http://www.ballpointtech.com/wp-content/uploads/2010/09/News-Still.png');
        width:130px;
        height:92px;    
}
    #li_news:hover {
        background-image:url('http://www.ballpointtech.com/wp-content/uploads/2010/09/News-Rollover.png');
    }
#li_news:active {
        background-image:url('http://www.ballpointtech.com/wp-content/uploads/2010/09/News-Click.png');
    }
#li_tipstricks {
        background-image:url('http://www.ballpointtech.com/wp-content/uploads/2010/09/tipstricks-still.png');
        width:130px;
        height:92px;    
}
    #li_tipstricks:hover {
        background-image:url('http://www.ballpointtech.com/wp-content/uploads/2010/09/tipstricks-rollover.png');
        }
    #li_tipstricks:active {
        background-image:url('http://www.ballpointtech.com/wp-content/uploads/2010/09/tipstricks-click.png');
    }
</style>

Struggling with the formatting here...

javascriptjquerycsshoverfade

Answer №1

I have created a starting point in jsbin for you. I demonstrated how to wire up the news icon. Please note that it may not be foolproof as exiting the element before the transition is complete may result in the element being in the wrong state. There could be better methods in jquery than using fadeOut/fadeIn for this task. Also, remember to add !important to the background of :active so that the image remains visible when clicked.

Additionally, ensure that all <a> elements are within <li> elements. Set links to display: block so they fill the space inside the list item, and eliminate the need for the hacky onclick="window.location...".

Answer №2

@hunter

this is overlooking the fading desire.

$('your.item').mouseenter(function(){
     $('your.item').stop().animate({opacity: 0},200,function(){

          $('your.item').attr('src','/new/image.jpg');
          $('your.item').stop().animate({opacity: 1},200);
    }
    });




  });

this provides a general overview. not yet tested or verified. if you try this out and place it on jfiddle, I'll guide you through it. You also need to create a .mouseleave() function

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

Implementing JavaScript to override inline CSS styles

Is it possible to override inline CSS using JavaScript with compatibility for IE6? I came across a pure CSS solution, but unfortunately it doesn't work in IE. http://www.sitepoint.com/blogs/2009/05/27/override-inline-css/ <div class="block"> ...

javascriptjquerycssinternet-explorer

Performing an AJAX call in Joomla version 3.3

In my view/tmpl/edit.php, I have the following code snippet: <script type="text/javascript"> jQuery("#button").click(function(){ jQuery.ajax({ url:'somefile.php', type:'POST', data: ...

phpjqueryajaxjoomla

The jQuery ticker functions smoothly on jsfiddle, but encounters issues when implemented in a .HTML file

My jQuery newsticker functions perfectly in jsFiddle, but when I transfer it to an HTML file, it mysteriously stops working. Despite keeping everything the same, it just doesn't work. You can view the functioning version on jsFiddle here: http://jsfi ...

javascriptjqueryhtmlcss

Is it possible to generate an array of all matches found by a regular expression

I am trying to utilize the match-all package in order to match CSS selectors and generate an array of all of them. Here is the code snippet. const matchAll = require("match-all"); let s = `.u-br, .u-nr { blah blah } .u-tr { blah .blah }`; consol ...

javascriptnode.jsregex

A guide to parsing JSON files and extracting information

How can I extract the name and status from a JSON object? I've attempted various methods like [0] - [1], as well as trying without, but to no avail. [ { "status": "OK" }, { "id": "1" ...

javascriptajax

abnormality observed in the way checkbox output is linked to an object's property through ng-model

I am having trouble understanding the following issue: Here is my angular code: (function(){ 'use strict'; angular.module('myMod',[ ]) .controller('abc',function($scope) { $scope.products = products; $sc ...

javascripthtmlangularjsangularjs-scopeangularjs-ng-model

Tips for Sending Emails from an Ionic Application without Utilizing the Email Composer Plugin

I am attempting to send an email from my Ionic app by making an Ajax call to my PHP code that is hosted on my server. Below is the code for the Ajax call: $scope.forget = function(){ $http({ method: 'POST', url: 's ...

javascriptphpajax

Failed to cast value "undefined" to ObjectId in the "_id" path for the model "User"

I've been encountering an issue that I can't seem to resolve despite searching on Stack and Google. My ProfileScreen.js is meant to display a user's profile, but when attempting to view the profile, I receive this error: "Cast to ObjectId fa ...

javascriptnode.jsmongodbexpressmongoose

Ways to avoid the cascading of CSS styles onto multiple Three.JS scenes

It seems like I might have to take the longer route to solve this issue, but let's give it a shot... I'm facing a challenge when applying CSS to control the opacity of a specific HTML element that acts as a container for a Three.JS scene. In thi ...

cssthree.jsopacityscene

Passing a message from a Struts2 action to jQuery

When using jQuery Ajax to call a Struts2 action, I have the following setup: $.ajax ({ url: 'callAction.action', type: 'POST', data: data, dataType: 'string', success: function (data ...

javajqueryajaxstruts2

Encountered an expression when expecting an assignment or function call in the jsreact codebase, triggering the no-unused-ex

router.js code snippet import React from 'react'; import { Route } from 'react-router-dom'; import CommentList from './containers/commentview'; const BaseRouter = () =>{ return ( <div> <Route exact= ...

javascriptreactjsreact-router-dom

Delete elements with identical values from array "a" and then delete the element at the same index in array "b" as the one removed from array "a"

Currently, I am facing an issue while plotting a temperature chart as I have two arrays: a, which consists of registered temperature values throughout the day. For example: a=[22.1, 23.4, 21.7,...]; and b, containing the corresponding timestamps for eac ...

javascriptarrays

Sending empty data to the controller via an Ajax POST request with model binding

I have been struggling with a null value issue when making an AJAX POST request to the controller (ASP.NET Core MVC). Despite trying various solutions from StackOverflow, I have not been able to resolve it. Any assistance would be greatly appreciated. The ...

javascriptjqueryajaxasp.net-coreasp.net-core-mvc

Adjusting the placement of a dropdown menu while scrolling within the container element using CSS

Is there a way to keep the submenu aligned under the button even when scrolling within the container div? Currently, it stays in the middle of the page. div.container { height: 200px; width: 400px; border: 1px solid black; overflow-y: scroll; ...

htmlcsscss-position

Enhance your jQuery cycle experience with additional scrollHorz effects embedded within every slide

My latest project involves creating a scrollHorz slideshow where I am focusing on animating divs inside each slide. The specific jQuery pseudocode I would like to achieve is as follows: $(".item .top").startSlideHorz(); $(".item .middle .left").delay( ...

jquerysliderjquery-cyclejquery-effects

My website's logo is not appearing on the navigation bar in the HTML code

Hi there! I recently tried adding a logo to my navigation bar in an HTML file, but for some reason, the logo doesn't appear when I run the file. I'm currently learning web development through a course on Coursera, and I am quite new to programmin ...

htmlcssbootstrap-5

Transform a JavaScript Array into a JSON entity

Currently working on a Mail Merge project using Google Apps Script, I've encountered an issue with displaying inline images in the email body. After sending the email using GmailApp.sendEmail(), all inline images are shown as attachments instead of be ...

javascriptjsongmailgoogle-apps-scriptinline-images

What is the best way to enhance the SQL query limit by activating a button?

I'm new to programming, and I want to learn how to dynamically increase the limit of an SQL query when a button is clicked. Here's what I have so far: <?php $number = 5; $db->query("SELECT * FROM results LIMIT $number"); ?> & ...

javascriptjquerysql-server

Issues rendering ThreeJS geometry data imported from Json file

Having been a dedicated user of this website for some time now, I must admit that this is the first instance where I find myself in need of posting a question. The issue at hand revolves around a Json file from which I extract data and manipulate it with m ...

javascriptjsonthree.js

Building a dynamic search feature using Ajax and PHP to transfer search results to a PHP variable or display as plain text

I designed a form that allows users to input orders with various details into the database. One of the fields in this form is labeled Client, where users have the option to either create a new client or select an existing one. To facilitate the selection ...

javascriptphpjqueryhtmlmysql