Adding a cross-fade, or fade-out fade-in to a script

[KennyP]

I'd like to add a cross-fade, or fade-out of one image as another image fades in to the following script.
Would you please show me how it's done?

Thanks

<script>
$(function() {
    $("#mute").click(function(e) {
        e.preventDefault();

        var song = $('audio')[0]
        if (song.paused){
            song.play();
            document.getElementById("mute").src = "images/music-off.png";
        }else{
            song.pause();
            document.getElementById("mute").src = "images/music-on.png";
        }
        });
});


  $("#mute").hover(function(e) {
        var song = $('audio')[0];
        if (song.paused){
            $(this).attr("src", "images/music-on-over.png");		      
	    } else {
            $(this).attr("src", "images/music-off-over.png");		      			
        }
    }, function(e) {
        var song = $('audio')[0]
        if (song.paused){
            $(this).attr("src", "images/music-on.png");		      
	    } else {
            $(this).attr("src", "images/music-off.png");		      			
        }
   });
</script>

[bojangles]

This topic seems familiar, yes? The logic for that was presented in an earlier thread answer for you. This http://www.dynamicdrive.com/forums/s...o-Tag&p=317263

So the idea is to change the classname on a span instead of the src on an img tag, and then apply CSS transitions for fading effects. You will need to check how to change the class with jQuery because you appear to be using that library, and I dont know how myself, but the CSS theory is in the linked demo by Beverleyh in this answer http://www.dynamicdrive.com/forums/s...o-Tag&p=317263

[jscheuer1]

You may already be in trouble with touch devices because there's no hover in the way there is with a mouse (mouseover/mouseout), however, the mouseover event does fire on touchstart and the on mouseout event not until touchstart of some other element on the page. As a result, on those devices you will have the button looking like its being hovered when it's not. This may or may not matter.

That's a separate issue but why most folks these days don't bother with mouseover/out effects in javascript unless they are specifically blocked for touch devices or at least skipped when the first event on the element is touchstart (most touch devices fire this first, followed in about 300 milliseconds by the pseudo mouse down, click, and over events).

OK, that aside for the moment, when doing a fade in/out, unless you want your element to go blank for a moment during the transition, you really need two elements, one on top of the other. Only the top one needs to fade in/out. When it fades in, the one beneath it will appear to fade out, when it fades out, the one below will look to fade in. If these are two images, they need to be the same size and/or be held in parent elements like divs with background that are large enough to cover. If that strategy is used, its one of these divs that is faded in and out. Exchanging four images in this manner gets more complicated. For that you would need to either use three or more divs/images or use two divs that change their stacking (zIndex) so as to get one to move to the top before fading in.

In any case, it's more complicated than just fading out first, switching the src of an image, then fading back in after the switch. Though, if you are willing to fadeout completely in between each transition, it would be that simple. And that might be the best way to start learning to do this. At least you're already using jQuery, which makes fadeIn() and fadeOut() standard on jQuery elements, and can assist in changing z-indexes if you choose to go that route.

[bojangles]

This is the exact post link http://www.dynamicdrive.com/forums/s...263#post317263

[KennyP]

Thanks very much for the explanation John. When you say, "When it fades in, the one beneath it will appear to fade out, when it fades out, the one below will look to fade in," you describe exactly what was asked of me to do for a girl friend's website. No wonder I couldn't even begin to make this work. When you can, would you please show me how it's done? Much too complicated for me.

Here's the test page showing what I already have, including the musical random array you showed me how to code.

[KennyP]

Hi John:

I got it to work!

I altered a fade file from my own website.

Test Page

Working 4 state on/off fade code:

<script type="text/javascript">
	var hoverFadeTime = 900;
	var clickFadeTime = 900;
	var hoverFade = true;
	
	function crossFade(el, url, c) {
		if(!c || hoverFade) {
			if(el.css("background-image").indexOf(url) == -1) {
				var ap = $("<button type=\"button\" class=\"play\"></button>").css({
					"position": "absolute",
					"left": el.position().left,
					"top": el.position().top,
					"z-index": -1,
					"background-image": el.css("background-image")
				});
				el.after(ap).css("background-image", "url(\"" + url + "\")")
				el.hide().fadeIn((c ? hoverFadeTime : clickFadeTime), function() {
					ap.remove();
				});
				if(c) {
					ap.fadeOut((c ? hoverFadeTime : clickFadeTime));
				}
			}
		} else {
			el.css("background-image", "url(\"" + url + "\")");
		}
	}

	$(".play").click(function() {
		var parent = $(this);
		var child = parent.children()[0];
		if(child.paused) {
			$(".play > audio").each(function() {
				if(!this.paused) {
					crossFade($(this).parent(), "images/music-off.png");
					this.pause();
					this.currentTime = 0;
				}
			});
			crossFade(parent, "images/music-off.png");
			child.play();
		} else {
			crossFade(parent, "images/music-on.png");
			child.pause();
			child.currentTime = 0;
		}
	}).mouseover(function() {
		var parent = $(this);
		if(parent.css("opacity") == 1) {
			if(parent.children()[0].paused) {
				crossFade(parent, "images/music-on-over.png", 1);
			} else {
				crossFade(parent, "images/music-off-over.png", 1);
			}
		}
	}).mouseout(function() {
		var parent = $(this);
		//setTimeout(function() {
		if(parent.children()[0].paused) {
			crossFade(parent, "images/music-on.png", 1);
		} else {
			crossFade(parent, "images/music-off.png", 1);
		}
		
	});
</script>


<div class="style1">
<button type="button" id="mute" src="images/music-off.png" class="play"/><audio id="audio" preload="auto" tabindex="0" type="audio/mpeg"></audio></button>
</div>