How do I add a simple transition to image swap?

Hi all

I have a simple image swap when I click the image below with id#changer, I need to somehow add a little flourish to this swap so everything is not so static and robotic.

How can I add a little slide transition of some sort as the image swaps and vice-versa (maybe a toggle)?

$( document ).ready(function() {
    $("#changer").click(function(){
      imagePath = $("#changer").attr("src");
      if(imagePath == "images/dev/instance1.png"){
          $("#changer").attr("src", "images/dev/instance2.png");
      }else{
          $("#changer").attr("src", "images/dev/instance1.png");        
      }
    });
  });

<img src="images/dev/instance1.png" alt="" id="changer">

Thanks, Barry

I need to add fadeIn or Slide toggle somewhere.
I tried below though only on the second click to close does the effect work and make the image disappear?
I need a simple slide in slide out sort of effect.

if(imagePath == "images/dev/instance1.png"){
          $("#changer").attr("src", "images/dev/instance2.png").fadeIn(3000);
      }else{
          $("#changer").attr("src", "images/dev/instance1.png").slideUp();        
      }

Any guidance anyway thanks.

Maybe you can modify this script that uses toggle to toggle?

function init(){
	$("#toggle_ctrl").text('Show All Known Forums');
	$("#toggle_ctrl").css({"display":"block"});
	$("#toggle_ctrl").toggle(
		function(){
			$("#toggle_ctrl").text('Hide All Known Forums');
			$("dd.recorded_forums").each( function() {
				if ( $(this).css('line-height') == '8px' )
				{
					$(this).trigger('click');
				}
			});
			$("dd.recorded_forums").css({"color":"#000", 
										"background-image":"url(./includes/minus-8.png)", 
										"background-repeat": "no-repeat", 
										"line-height": "normal"});
			$("dd.recorded_forums a").css({"display":"inline"});
		},
		function () {
			$("#toggle_ctrl").text('Show All Known Forums');
			$("dd.recorded_forums").each( function() {
				if ( $(this).css('line-height') == 'normal' )
				{
					$(this).trigger('click');
				}
			});
			$("dd.recorded_forums").css({"color":"#fff", 
										"background-image":"url(./includes/plus-8.png)", 
										"background-repeat": "no-repeat", 
										"line-height": "8px"});
			$("dd.recorded_forums a").css({"display":"none"});
		} 
	);
	$("dd.recorded_forums").trigger('click');
}

Looks like a bit of a challenge :slight_smile:
As mentioned, I was hoping to simply drop in fade() or toggle() in my original code.

Appreciate your input, if I can’t figure what I need I’ll have a dig into your function and see if I can extract what I need, thanks Mittineague.

I also tried, or thought maybe I could tell the js to load a bit of css:
Another option maybe?

And another problem is that I need this to work in IE8.

 -webkit-transition: opacity 1s ease-in-out;
 -moz-transition: opacity 1s ease-in-out;
 -o-transition: opacity 1s ease-in-out;
 transition: opacity 1s ease-in-out;

Barry