JQuery, swap image smoothly

jquery change image src on click
jquery add image src dynamically
jquery change image src on load
change image onclick jquery example
change multiple images on click jquery
jquery get image src
change image onclick jquery codepen
jquery change image href

I have a problem with changing image. It changes, but not smoothly. I need exactly jquery, not css approach, because I need to change img attribute.

My attempt

$("#klubnika").hover(function() {
  $("#klubnika").attr("src","img/team-section/banka-klub.jpg");
    },function() {
      $("#klubnika").attr("src","img/team-section/klubnika.jpg");
    }
);

Any ideas, how to make swap effect smoothly?


I really would use two images for this and use this way:

#klubnika {position: relative; display: inline-block; cursor: pointer;}
#klubnika img {display: block;}
#klubnika img.off {position: absolute; z-index: 1; left: 0; top: 0; opacity: 0; transition: opacity 0.5s linear;}
#klubnika:hover img.off {opacity: 1;}
<script src="https://code.jquery.com/jquery-2.2.4.js"></script>
<div id="klubnika">
  <img src="//placehold.it/200x100?text=Hello" class="on" />
  <img src="//placehold.it/200x100?text=World" class="off" />
</div>

Smooth Image-to-Image Fade Transition?, /blog/index.php/jquery/jquery-image-swap-gallery/ which is perfect in slick and have the images fade into one another rather just change. Yet another jQuery Swap Image On Hover plugin that swaps out image sources with smooth fadeIn / fadeOut effects based on CSS3 transitions. How to use it: 1. Load the latest version of jQuery library and the jQuery swapImagesOnhover plugin's files in the html file.


You can use Jquery Animation for seamless image changes for example solution below

$("#klubnika").hover(function(){

   $(this).fadeOut('fast', function () {
       $(this).attr('src', "img/team-section/banka-klub.jpg");
       $(this).fadeIn('fast');
    }); 
});

Answered before Mentioned In

jQuery animate on an image replacement

How to Change the Image Source Using jQuery, You can use the attr() method to change the image source (i.e. the src attribute of the <img> tag) in jQuery. The following example will change the image src  To update images on a web page dynamically with jQuery it’s as simple as using the attr * function. Using this you can modify the * src **attribute of img> **tags (or indeed any other attribute of any other tag!) to change the location of the image that is loaded. Enjoy creating something dynamic and awesome with this technique!


This question is pretty much the same: Fading between images

The answer they give there uses the fadeIn and fadeOut functions of jQuery like this:

<div id="imageSwap">
</div>  

<script language="javascript" type="text/javascript">

    $(document).ready(function () {
      setImageOne();
    });

    function setImageOne() {
      $('#imageSwap').fadeIn(500).html('<img src="image01.jpg" />').delay(2000).fadeOut(500, function () { setImageTwo(); });
    }

    function setImageTwo() {
      $('#imageSwap').fadeIn(500).html('<img src="image02.jpg" />').delay(2000).fadeOut(500, function () { setImageOne(); });
    }

</script>

I think you can get the idea from this, but if possible, I recommend using CSS instead.

Elegant Image Swap Effect In jQuery And CSS3 , Learn how to cover how to properly swap the source of a single image using jQuery with a transition fade effect. The requirement was to be able to swap two divs smoothly. Not just swap the contents of the divs in question, that was too easy, but to physically move the divs. One div to where the second div was positioned and vice versa, making the animation visible to the user to emphasise the movement.


jQuery Image Swapping with Fade Effect, To smoothly change background images using jQuery, you should either stack more than one image on each other, or store the images in a directory and use a​  Insert a new image, whose source is the background-image of our start image Position the new image so that sits directly behind the starting image Bind the hover event to start the effect


jQuery: How to Smoothly Change Background Images, Make a div that is the exact size of the image. This div will have a background image applied to it of the second image. Then put an inline image  You’re not setting a separate z-index on each image. For 4 images set the bottom one to 1, the next to 1, the next to 3 and the top one to 4. Then fade the top one out and change its z-index from 4 to 1. Then change the other images within indexes 1,2 and 3 to 2, 3 and 4 respectively. Then fade the image with z-index 1 back in. And then repeat.


Fade Image Into Another Image, A demo, code and explanation for a simple jQuery crossfade image cycler. fadeOut(1500,function(){//fade out the top image $active.css('z-index',1).show(). To use this on a div, just replace img with div throughout the javascript, and amend your html accordingly. Your crossfade may be “simple”, but it's buttery smooth. jquery change background image with fade effect (6) . I finally have this working now but would like to know how I can use JQuery's animate function to make the background image changes fade in nicely when you hover over the list items on the homepage:-