HTML image hover effect: smoothly transition to the left or right

Trying to create a mouse-over button with code I found online

Found the code on this website 

http://helplogger.blogspot.com/2012/05/create-rollover-image-effect-change.html

The code I'm using:

<a href="Blog"><img src="images/menu/dflt_blog_btn.png" onmouseover="this.src='images/menu/rlovr_blog_btn.png'" onmouseout="this.src='images/menu/dflt_blog_btn.png'" /></a>

Wondering if it's possible to make the button fade in instead of just instantly changing? If so, any guidance on how to achieve that?

I know this may sound silly, but if we can make it fade in, is it possible to fade in from left or right direction as well?

javascriptjqueryhtmlcss

Answer №1

To achieve this functionality, you can follow the steps below:


  $(document).ready(function(){
     $('a').hover(function(){
          $(this).stop().find('img').hide()
          .attr('src','image1.jpg').fadeIn();
      },function(){
          $(this).stop().find('img').hide()
          .attr('src','image2.jpg').fadeIn();
     });
  })

View 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

Steps for adding an item to the datasource in a Kendo UI Combobox manually

I am facing an issue with a combobox that is being populated using a JSON string received from a servlet. $(document).ready(function() { //Combobox Init (From Servlet) var comboBoxDataSource = new kendo.data.DataSource({ transport : { ...

javascriptjquerykendo-ui

Tips for showcasing JSON data in AngularJS by utilizing the <pre> tag

How can I properly format and display a JSON string inside a dynamically created Div using a forEach loop? Here is my current code snippet: <div id="container_div"> </div> $scope.getJSON = () => { var settings = { "url ...

javascriptjsonangularjs

Troubleshooting Issue: Click functionality not functioning for button within Bootstrap dropdown menu

Issue The event handler does not get triggered when a button is clicked inside a Bootstrap dropdown menu. Desired Outcome I want the event handler to execute when the button with id repeat_booking_button in the dropdown is clicked. Attempted Solutions ...

javascripthtmljquerytwitter-bootstrapbootstrap-4

Using IF-ELSE statements in jQuery for DataTables

Is there a way to handle If else statements like method in the datatable plugin? Currently, when the 'data' variable returns a value, everything works correctly. However, if it is empty, I would like it to return either "from1" or "from2", which ...

javascriptjqueryjsonajaxdatatable

The React Navbar dropdown items appear to be displaying only text, without any menu showing up behind

I'm having an issue with the background of my dropdown menu not showing properly. The text within the dropdown items is appearing without a background, making it look like they are floating in a line on the page. I've tried adjusting the z-index ...

cssreactjsdropdownreact-bootstrap

The text box isn't displaying the value, even though it was functioning properly just two days back

<html> <head> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> <script type="text/javascript"> function insertParamIntoField(anchor, param, field) { ...

javascriptjqueryhtml

Ways to modify the anchor tag's background color in Magento

I am currently working on designing a Magento homepage and I'm looking to change the background color for a specific anchor tag. However, my navigation menu contains 5 different anchor tags and I specifically want to change the color of the 5th one. A ...

javascripthtmlmagento

Parcel Bundler works perfectly fine on localhost, however, an error is being displayed on the index.html file in the Dist folder

Currently, I am in the process of learning how to use Parcel for bundling purposes. I have set up a index.html file that is connected with index.js. Surprisingly, everything works perfectly fine when I access it via localhost:1234 using Parcel. However, wh ...

javascriptnpmbabeljsnode-modulesparceljs

Utilizing HTML/CSS to display text and an image positioned above a sleek navigation bar

I am struggling to align a logo on the left side of my website, with text on the right next to it, all placed above the navigation bar. Despite my efforts, I just can't seem to get them positioned correctly! CSS .headerLogo{ float:left; marg ...

csshtmlcss-positionpositioning

WP_Query Ajax pagination displays "No more posts to load" instead of fetching additional posts

I am currently working on a custom loop using wp_query to display a table showing user orders. The content, pagination, and data are all functioning correctly with 4 results per page. However, I want to implement dynamic loading of additional results using ...

javascriptphpjqueryajaxwordpress

Error message: "The variable 'bitmap' is not defined in jQuery/CreateJS $.ajax"

I recently acquired a product designer that uses CreateJS and jQuery. Within the code, there is a function called UrlLoader which wraps an $.ajax call. function UrlLoader(params) { $.ajax({ url: url, type: 'POST' ...

javascriptjqueryjsoncreatejs

Proficient in transforming arrays into objects

Having difficulty with a particular javascript problem. Is there a way to approach it in this manner? // Given the input data, I aim to produce output as shown below const ListValues = ["id", "name", "description"] // Expected output const initialValue ...

javascriptarraysobjectconverters

Oops! There seems to be a problem with the Node.js App. The MongooseError is indicating that the parameter `uri` in the `openUri()` function should be a string,

I've encountered an issue with my Next.js app involving MongoDB that I've been struggling to resolve. Hoping someone here can provide some insight and help me out. This is quite crucial for my project. First, I'll share the code from my serv ...

javascriptnode.jsmongodbmongoosenext.js

Utilizing the ng-required directive with the model's value in AngularJS

I need to validate a form field for both null and its value. Can anyone suggest how I can achieve this without writing a function on the controller? <form name="frm"> <input type="text" ng-model="myModel" ng-required="myModel != '' || m ...

javascriptangularjs

Pinia fails to initialize in Vue.js router

I've been experimenting with Pinia for state management in my Vue application, but I've encountered an issue where Pinia is being used before it's initialized in the main.js file. Below is the code snippet from the routes file: import { cre ...

javascriptvue.jsvuejs3vue-routerpinia

Using Vue router meta title with a passed parameter

I'm faced with the challenge of creating a dynamic title for a Vue route. Unfortunately, I haven't been able to figure out how to pass a parameter into the meta title. This is crucial for me because my VueHeader component relies on the route meta ...

javascriptvue.jsvuejs2vue-router

Leveraging window.location.origin with modernizr

My goal is to achieve the following: var siteBaseUrl = window.location.origin; However, in IE 9 it returns undefined I am attempting to grasp how I can utilize modernizr based on the advice provided here: $window.location.origin gives wrong value when u ...

javascriptmodernizr

Transferring data from one of the three submitted forms by utilizing jQuery's AJAX function

Currently, I am facing a challenge with three forms on a website, where two of them are located in modal windows. My goal is to use ajax to send input values such as name, phone, email, and radio button selections (which vary in each form). However, I have ...

javascriptjqueryajax

Getting a URL path in Next.js without relying on the Link component when the basePath is configured

Base Path from the next.js documentation states: For instance, by setting basePath to /docs, /about will automatically transform into /docs/about. export default function HomePage() { return ( <> <Link href="/about"> ...

javascriptnode.jsreactjsnext.js

Utilizing React and Material-UI to create an autocomplete feature for words within sentences that are not the first word

Looking to enable hashtag autocomplete on my webapp, where typing #h would display a menu with options like #hello, #hope, etc. Since I'm using material-ui extensively within the app, it would be convenient to utilize the autocomplete component for th ...

javascriptreactjsmaterial-ui