Tips for Achieving a Smooth Transition Effect with jQuery while Modifying an Image's Attribute

I am facing an issue with the code I have written to change the image source on mouse hover. While it does change the image src, the effect is quite jerky and abrupt. Is there a way to slow down the animation effect?

    <script>

    $(document).ready(function(){


        $("#image").hover(function(){           
            $(this).attr("src","images/pic2.png")
                },  function(){                 
                    $(this).attr("src","images/pic1.jpg")   
            });
        });


    </script>

</head>

<body>  
    <img id="image" src="images/pic1.jpg">  
</body>

EDIT

http://jsfiddle.net/MKuvn/

Answer №1

If you want to create a smooth transition on your webpage, consider using the fadeOut and fadeIn effects with jQuery:

 $(document).ready(function(){

     $("#picture").hover(function(){           
         $(this).fadeOut(800,function(){
           $(this).attr("src","images/pic2.png");
           $(this).fadeIn(800);
         });
       },  function(){                 
           $(this).fadeOut(800, function(){
             $(this).attr("src","images/pic2.png");
             $(this).fadeIn(800);
           });                  
       });
 });

Check out the demo here

Learn more about Fade IN / Out API

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

Tips for positioning an UpdateProgress in the middle of a grid view using CSS

Seeking a solution to position an Update Progress indicator in the middle of a Grid view within an Ajax Update Panel. Is there a CSS-only method to achieve this without relying on jQuery or JavaScript, either at the center of the grid view or the center ...

Remove input fields that were generated upon clicking a button

I'm facing an issue with my code that allows me to add inputs using @click="addInput()". However, I am struggling to delete specific inputs using @click="deleteInput(). When I try to delete an input with this.inputs.splice(index, 1), on ...

Setting attributes to a DOM element using String in jQuery

I am currently facing a challenge where I have a list of attributes saved as a string variable, and I need to add that variable to a <div>. Unfortunately, I am stuck and uncertain about the best approach. Here is what I have so far: HTML: <div&g ...

Arrows within modal image (adjusting size based on image)

In my modal carousel, the position of the arrows changes based on the image resolution. I would like the arrows to always remain inside each image, regardless of resolution. ...

Using Typescript with Protractor for Dropdown Menus

As a newcomer to Protractor, I am looking to automate the selection of a dropdown. While I have some knowledge in JavaScript, I am currently working with typescript. Can someone advise me on how to select the dropdown option based on the text provided? Fo ...

Bootstrap modal - Issue with modal automatically closing upon clicking

Trying to send a GET request to the server and use data from the database to populate a modal. The aim is to create an API-like functionality for future efficiency. By assigning the showAjaxModal class to all anchor tags, the goal is to automatically trig ...

Notes on using touch devices with Angular

My goal is to make my Angular application capable of displaying a footnote on mobile devices when text injected with nativeElement.innerHTML is clicked. I attempted to explain this before but feel that I didn't do it justice, so here's another sh ...

Looking for help with Bootstrap - attempting to make a two-column table using list-group-item styling

Novice programmer seeking assistance with bootstrap4. I'm attempting to set up a list group item to showcase user reviews.see image description here I've tried adjusting every possible element. At first glance, it appears straightforward, but ...

Importing CSS with Node Sass using npm

Instead of inlining css within sass, I attempted to utilize the npm package Node Sass CSS importer. Unfortunately, I am struggling to get it to function properly. I typically use npm as my build tool: "build:css": "node-sass some_path/style.scss some_pa ...

Embedding images using a blob or base64 format does not function properly on iOS devices

I'm facing an issue with setting the src of an img tag to display an image. The code snippet below works fine on android, mac, and windows, but it is not functioning correctly on iOS: let base64Image = pageModel.image; this.$currentPageImage.src = `da ...

Issue with the Bootstrap carousel jQuery plugin

Hi everyone, I need some help with creating a multiple items bootstrap carousel. I keep getting an error message that says "#Carousel".carousel is not a function TypeError: "#Carousel".carousel is not a function. Can anyone guide me on how to fix this issu ...

Do not reveal result of coin flip using Javascript and API

Even though I meticulously copied my professor's parsing process, the display isn't turning out as expected. It seems like something is off in my code. <div class="main"> <p>Heads or tails? click to toss the coin</p> & ...

How is the console.log in the final use still functioning despite the fact that the response is being sent by the GET

app.use((req, res, next) => { console.log('Executing first middleware function'); console.log("host: ", req.hostname); console.log("path: ", req.path); console.log("method: ", req.method); next ...

Tips for pausing briefly before triggering a keyup event ajax request using jQuery

I'm currently developing a small application that utilizes the Google Maps API. The user can input a pin type in a text box, triggering an AJAX call to fetch coordinates from my database. I've set up the action to occur on the keyup event after a ...

Is it possible to transform all values in arrays to 0s in JavaScript/p5.js during the copying process?

I’m struggling with a simple code where I want to store an array of arrays containing FFT audio data. It seems like there might be a JavaScript issue because when I try to push the array into another array called spectrums, all the values inside spectr ...

The subpage on Github Pages is failing to load despite the correct URL being entered

While working on a multipage website using React and hosting it on Github pages, I encountered an issue. The website functions perfectly on localhost, but encounters errors when accessing a subpage on Github pages. Upon clicking the subpage link, Github p ...

Discover the technique for combining three different text colors within one span element without resorting to the <font> tag

Is it possible to incorporate three different colors of text (details-red, Enter-blue, here-yellow) within a single span without utilizing the <font> tag? <span>Details Enter Here</span> ...

Font size determined by both the width and height of the viewport

I'll be brief and direct, so hear me out: When using VW, the font-size changes based on the viewport width. With VH, the font-size adjusts according to the viewport height. Now, I have a question: Is there a way to scale my font-size based on ...

Effective methods for managing data transfer from MySQL to JSON to PHP?

Currently, I am utilizing DataTables, a jQuery plugin, to showcase data from a MySQL database. The information is manipulated into JSON format within the HTML using some PHP code. While this setup is functioning, it may not be the most efficient approach. ...

Incorporating a checkbox option within a table

Hello, I am currently working on a PHP project and I have a question about adding checkboxes to a table to indicate selection. Since I couldn't find any existing answers on how to toggle checkboxes when clicking on a table row, I thought I'd shar ...