We help IT Professionals succeed at work.

jQuery transition effects.

I have a div set that changes content based on rollovers.

Here's the div code:
 
<div id="teamFocus">
	<div id="teamAction"></div>
	<div id="teamDescribe">
		<strong>Amber Tollefson</strong><br>
		Founder<br>
		<a href="mailto:amber@thegivengoproject.org">amber@thegivengoproject.org</a><p>
		Biography goes here.
	</div>
</div>

Open in new window


Here's the jQuery:
 
<script type="text/javascript">
$("img.teamRollover").mouseover(function rollOver(){
	switch($(this).attr("alt")){
		case 'Amber':
			$('#teamAction').css("background","#FFF url('images/team/amber_action.jpg') no-repeat center center");
			$('#teamDescribe').html("<strong>Amber Tollefson</strong><br>Founder<br><a href='mailto:amber@thegivengoproject.org'>amber@thegivengoproject.org</a><p>Amber's Biography");
			break;
		case 'John':
			$('#teamAction').css("background","#FFF url('images/team/john_action.jpg') no-repeat center center");
			$('#teamDescribe').html("<strong>John Galas</strong><br>Director of Soccer Development<br><a href='mailto:galas@thegivengoproject.org'>galas@thegivengoproject.org</a><p>John's Biography");
			break;
		case 'Jillian':
			$('#teamAction').css("background","#FFF url('images/team/jillian_action.jpg') no-repeat center center");
			$('#teamDescribe').html("<strong>Jillian Meyer</strong><br>Director of Event Coordination<br><a href='mailto:jillian@thegivengoproject.org'>jillian@thegivengoproject.org</a><p>Jillian's Biography");
			break;
		case 'Steve':
			$('#teamAction').css("background","#FFF url('images/team/steve_action.jpg') no-repeat center center");
			$('#teamDescribe').html("<strong>Steve Nugent</strong><br>Director of Finance<br><a href='mailto:steve@thegivengoproject.org'>steve@thegivengoproject.org</a><p>Steve's Biography");
			break;
		case 'Tori':
			$('#teamAction').css("background","#FFF url('images/team/tori_action.jpg') no-repeat center center");
			$('#teamDescribe').html("<strong>Tori Jensen</strong><br>Director of Health Administration<br><a href='mailto:tori@thegivengoproject.org'>tori@thegivengoproject.org</a><p>Amber's Biography");
			break;
		case 'Elizabeth':
			$('#teamAction').css("background","#FFF url('images/team/elizabeth_action.jpg') no-repeat center center");
			$('#teamDescribe').html("<strong>Elizabeth Tollefson</strong><br>Director of Marketing<br><a href='mailto:elizabeth@thegivengoproject.org'>elizabeth@thegivengoproject.org</a><p>Amber's Biography");
			break;
		case 'Pabla':
			$('#teamAction').css("background","#FFF url('images/team/pabla_action.jpg') no-repeat center center");
			$('#teamDescribe').html("<strong>Pabla Ayala</strong><br>Director of Public Relations<br><a href='mailto:pabla@thegivengoproject.org'>pabla@thegivengoproject.org</a><p>Amber's Biography");
			break;
		case 'Brent':
			$('#teamAction').css("background","#FFF url('images/team/brent_action.jpg') no-repeat center center");
			$('#teamDescribe').html("<strong>Brent Brackin</strong><br>Director of Corporate Alliances<br><a href='mailto:brent@thegivengoproject.org'>brent@thegivengoproject.org</a><p>Amber's Biography");
			break;
	}
});
</script>

Open in new window


Right now, when you roll over an image, the div content just changes.
How can I add a transition effect to make it seem like the images fade/blend to one another
 - same for the text.



Here's a screen shot:
 Team page Team page
Comment
Watch Question

Commented:
For this to happen you must on every mouseover effect fadeOut your two elements and then fade in the next one by giving a callback function and adding the jquery method fadeIn to the teamAction, teamDescribe elements.

Here is the modified code:
<script type="text/javascript">
$("img.teamRollover").mouseover(function rollOver(){
    $('#teamDescribe, #teamAction').fadeOut("fast", switchit);
	
	function switchit(){
	switch($(this).attr("alt")){
		case 'Amber':
			$('#teamAction').css("background","#FFF url('images/team/amber_action.jpg') no-repeat center center").fadeIn("slow");
			$('#teamDescribe').fadeIn("slow").html("<strong>Amber Tollefson</strong><br>Founder<br><a href='mailto:amber@thegivengoproject.org'>amber@thegivengoproject.org</a><p>Amber's Biography");
			break;
		case 'John':
			$('#teamAction').css("background","#FFF url('images/team/john_action.jpg') no-repeat center center").fadeIn("slow");
			$('#teamDescribe').fadeIn("slow").html("<strong>John Galas</strong><br>Director of Soccer Development<br><a href='mailto:galas@thegivengoproject.org'>galas@thegivengoproject.org</a><p>John's Biography");
			break;
		case 'Jillian':
			$('#teamAction').css("background","#FFF url('images/team/jillian_action.jpg') no-repeat center center").fadeIn("slow");
			$('#teamDescribe').fadeIn("slow").html("<strong>Jillian Meyer</strong><br>Director of Event Coordination<br><a href='mailto:jillian@thegivengoproject.org'>jillian@thegivengoproject.org</a><p>Jillian's Biography");
			break;
		case 'Steve':
			$('#teamAction').css("background","#FFF url('images/team/steve_action.jpg') no-repeat center center").fadeIn("slow");
			$('#teamDescribe').fadeIn("slow").html("<strong>Steve Nugent</strong><br>Director of Finance<br><a href='mailto:steve@thegivengoproject.org'>steve@thegivengoproject.org</a><p>Steve's Biography");
			break;
		case 'Tori':
			$('#teamAction').css("background","#FFF url('images/team/tori_action.jpg') no-repeat center center").fadeIn("slow");
			$('#teamDescribe').fadeIn("slow").html("<strong>Tori Jensen</strong><br>Director of Health Administration<br><a href='mailto:tori@thegivengoproject.org'>tori@thegivengoproject.org</a><p>Amber's Biography");
			break;
		case 'Elizabeth':
			$('#teamAction').css("background","#FFF url('images/team/elizabeth_action.jpg') no-repeat center center").fadeIn("slow");
			$('#teamDescribe').fadeIn("slow").html("<strong>Elizabeth Tollefson</strong><br>Director of Marketing<br><a href='mailto:elizabeth@thegivengoproject.org'>elizabeth@thegivengoproject.org</a><p>Amber's Biography");
			break;
		case 'Pabla':
			$('#teamAction').css("background","#FFF url('images/team/pabla_action.jpg') no-repeat center center").fadeIn("slow");
			$('#teamDescribe').fadeIn("slow").html("<strong>Pabla Ayala</strong><br>Director of Public Relations<br><a href='mailto:pabla@thegivengoproject.org'>pabla@thegivengoproject.org</a><p>Amber's Biography");
			break;
		case 'Brent':
			$('#teamAction').css("background","#FFF url('images/team/brent_action.jpg') no-repeat center center").fadeIn("slow");
			$('#teamDescribe').fadeIn("slow").html("<strong>Brent Brackin</strong><br>Director of Corporate Alliances<br><a href='mailto:brent@thegivengoproject.org'>brent@thegivengoproject.org</a><p>Amber's Biography");
			break;
	}
    }
});
	
</script>

Open in new window


<script type="text/javascript">
$("img.teamRollover").mouseover(function rollOver(){
    $('#teamDescribe, #teamAction').fadeOut("fast", switchit);
	
	function switchit(){
	switch($(this).attr("alt")){
		case 'Amber':
			$('#teamAction').css("background","#FFF url('images/team/amber_action.jpg') no-repeat center center").fadeIn("slow");
			$('#teamDescribe').fadeIn("slow").html("<strong>Amber Tollefson</strong><br>Founder<br><a href='mailto:amber@thegivengoproject.org'>amber@thegivengoproject.org</a><p>Amber's Biography");
			break;
		case 'John':
			$('#teamAction').css("background","#FFF url('images/team/john_action.jpg') no-repeat center center").fadeIn("slow");
			$('#teamDescribe').fadeIn("slow").html("<strong>John Galas</strong><br>Director of Soccer Development<br><a href='mailto:galas@thegivengoproject.org'>galas@thegivengoproject.org</a><p>John's Biography");
			break;
		case 'Jillian':
			$('#teamAction').css("background","#FFF url('images/team/jillian_action.jpg') no-repeat center center").fadeIn("slow");
			$('#teamDescribe').fadeIn("slow").html("<strong>Jillian Meyer</strong><br>Director of Event Coordination<br><a href='mailto:jillian@thegivengoproject.org'>jillian@thegivengoproject.org</a><p>Jillian's Biography");
			break;
		case 'Steve':
			$('#teamAction').css("background","#FFF url('images/team/steve_action.jpg') no-repeat center center").fadeIn("slow");
			$('#teamDescribe').fadeIn("slow").html("<strong>Steve Nugent</strong><br>Director of Finance<br><a href='mailto:steve@thegivengoproject.org'>steve@thegivengoproject.org</a><p>Steve's Biography");
			break;
		case 'Tori':
			$('#teamAction').css("background","#FFF url('images/team/tori_action.jpg') no-repeat center center").fadeIn("slow");
			$('#teamDescribe').fadeIn("slow").html("<strong>Tori Jensen</strong><br>Director of Health Administration<br><a href='mailto:tori@thegivengoproject.org'>tori@thegivengoproject.org</a><p>Amber's Biography");
			break;
		case 'Elizabeth':
			$('#teamAction').css("background","#FFF url('images/team/elizabeth_action.jpg') no-repeat center center").fadeIn("slow");
			$('#teamDescribe').fadeIn("slow").html("<strong>Elizabeth Tollefson</strong><br>Director of Marketing<br><a href='mailto:elizabeth@thegivengoproject.org'>elizabeth@thegivengoproject.org</a><p>Amber's Biography");
			break;
		case 'Pabla':
			$('#teamAction').css("background","#FFF url('images/team/pabla_action.jpg') no-repeat center center").fadeIn("slow");
			$('#teamDescribe').fadeIn("slow").html("<strong>Pabla Ayala</strong><br>Director of Public Relations<br><a href='mailto:pabla@thegivengoproject.org'>pabla@thegivengoproject.org</a><p>Amber's Biography");
			break;
		case 'Brent':
			$('#teamAction').css("background","#FFF url('images/team/brent_action.jpg') no-repeat center center").fadeIn("slow");
			$('#teamDescribe').fadeIn("slow").html("<strong>Brent Brackin</strong><br>Director of Corporate Alliances<br><a href='mailto:brent@thegivengoproject.org'>brent@thegivengoproject.org</a><p>Amber's Biography");
			break;
	}
    }
});
	
</script>

Open in new window

Author

Commented:
Thank you.
fade out is working properly, fade in isn't working.
I just copied/pasted your code.

Your explanation makes perfect sense though, so I'm trying to figure it out before you get back to this post.

Author

Commented:
the callback isn't working ...

if I add something like alert('test') as the first step within the function switchit, there's no alert.

Remove the call back & the method - the switch function works, but it's a funky transition ... the callback is needed the way you explained ... Not sure yet why the callback isn't working ..

Author

Commented:
If i pass the alt value into the function like this:

 
<script type="text/javascript">
$("img.teamRollover").mouseover(function rollOver(){
    
	$('#teamDescribe, #teamAction').fadeOut("fast", switchit($(this).attr("alt")));

	function switchit(teammate){
		switch(teammate){
			case 'Amber':
				$('#teamAction').css("background","#FFF url('images/team/amber_action.jpg') no-repeat center center").fadeIn("fast");
				$('#teamDescribe').fadeIn("fast").html("<strong>Amber Tollefson</strong><br>Founder<br><a href='mailto:amber@thegivengoproject.org'>amber@thegivengoproject.org</a><p>Amber's Biography");
				break;
			case 'John':
				$('#teamAction').css("background","#FFF url('images/team/john_action.jpg') no-repeat center center").fadeIn("fast");
				$('#teamDescribe').fadeIn("fast").html("<strong>John Galas</strong><br>Director of Soccer Development<br><a href='mailto:galas@thegivengoproject.org'>galas@thegivengoproject.org</a><p>John's Biography");
				break;
			case 'Jillian':
				$('#teamAction').css("background","#FFF url('images/team/jillian_action.jpg') no-repeat center center").fadeIn("fast");
				$('#teamDescribe').fadeIn("fast").html("<strong>Jillian Meyer</strong><br>Director of Event Coordination<br><a href='mailto:jillian@thegivengoproject.org'>jillian@thegivengoproject.org</a><p>Jillian's Biography");
				break;
			case 'Steve':
				$('#teamAction').css("background","#FFF url('images/team/steve_action.jpg') no-repeat center center").fadeIn("fast");
				$('#teamDescribe').fadeIn("fast").html("<strong>Steve Nugent</strong><br>Director of Finance<br><a href='mailto:steve@thegivengoproject.org'>steve@thegivengoproject.org</a><p>Steve's Biography");
				break;
			case 'Tori':
				$('#teamAction').css("background","#FFF url('images/team/tori_action.jpg') no-repeat center center").fadeIn("fast");
				$('#teamDescribe').fadeIn("fast").html("<strong>Tori Jensen</strong><br>Director of Health Administration<br><a href='mailto:tori@thegivengoproject.org'>tori@thegivengoproject.org</a><p>Amber's Biography");
				break;
			case 'Elizabeth':
				$('#teamAction').css("background","#FFF url('images/team/elizabeth_action.jpg') no-repeat center center").fadeIn("fast");
				$('#teamDescribe').fadeIn("fast").html("<strong>Elizabeth Tollefson</strong><br>Director of Marketing<br><a href='mailto:elizabeth@thegivengoproject.org'>elizabeth@thegivengoproject.org</a><p>Amber's Biography");
				break;
			case 'Pabla':
				$('#teamAction').css("background","#FFF url('images/team/pabla_action.jpg') no-repeat center center").fadeIn("fast");
				$('#teamDescribe').fadeIn("fast").html("<strong>Pabla Ayala</strong><br>Director of Public Relations<br><a href='mailto:pabla@thegivengoproject.org'>pabla@thegivengoproject.org</a><p>Amber's Biography");
				break;
			case 'Brent':
				$('#teamAction').css("background","#FFF url('images/team/brent_action.jpg') no-repeat center center").fadeIn("fast");
				$('#teamDescribe').fadeIn("fast").html("<strong>Brent Brackin</strong><br>Director of Corporate Alliances<br><a href='mailto:brent@thegivengoproject.org'>brent@thegivengoproject.org</a><p>Amber's Biography");
				break;
		}
    }	
});

</script>

Open in new window


It starts to work, but as soon the appropriate teammate you rollover appears, they fade right back out ...
as if fadeOut() runs a second time on the DIV set.

Author

Commented:
Also - as a side note - this doesn't seem as intelligent as it should be ... (an issue with my code as the foundation) but for exampe if Tori was rolled over making her the active teammate & then you rollover Tori again, she would fade out and fade in again - instead of just doing nothing, which would be better.

Author

Commented:
Well ... Here's the final code I have put together ... But I'm still at a loss.

I corrected the rollover - so now it will only change the div content if the teammate you rollover ISN'T the active teammate.

I can't seem to figure out why it changes the div content a split second before it fades out, then fades in.

Here's my code:

 
<script type="text/javascript">
$("img.teamRollover").mouseover(function(){

	if($(this).attr("alt")!=$("#teamDescribe").attr("alt")){
	
		var teammate = $(this).attr("alt");
	    $('#teamDescribe, #teamActionFocus').fadeOut("fast");

			switch(teammate){
				case 'Amber':
					$('#teamDescribe').attr('alt','Amber');
					$('#teamActionFocus').css("background","#FFF url('images/team/amber_action.jpg') no-repeat center center").fadeIn("fast");
					$('#teamDescribe').fadeIn("fast").html("<strong>Amber Tollefson</strong><br>Founder<br><a href='mailto:amber@thegivengoproject.org'>amber@thegivengoproject.org</a><p>Amber's Biography");
					break;
				case 'John':
					$('#teamDescribe').attr('alt','John');
					$('#teamActionFocus').css("background","#FFF url('images/team/john_action.jpg') no-repeat center center").fadeIn("fast");
					$('#teamDescribe').fadeIn("fast").html("<strong>John Galas</strong><br>Director of Soccer Development<br><a href='mailto:galas@thegivengoproject.org'>galas@thegivengoproject.org</a><p>John's Biography");
					break;
				case 'Jillian':
					$('#teamDescribe').attr('alt','Jillian');
					$('#teamActionFocus').css("background","#FFF url('images/team/jillian_action.jpg') no-repeat center center").fadeIn("fast");
					$('#teamDescribe').fadeIn("fast").html("<strong>Jillian Meyer</strong><br>Director of Event Coordination<br><a href='mailto:jillian@thegivengoproject.org'>jillian@thegivengoproject.org</a><p>Jillian's Biography");
					break;
				case 'Steve':
					$('#teamDescribe').attr('alt','Steve');
					$('#teamActionFocus').css("background","#FFF url('images/team/steve_action.jpg') no-repeat center center").fadeIn("fast");
					$('#teamDescribe').fadeIn("fast").html("<strong>Steve Nugent</strong><br>Director of Finance<br><a href='mailto:steve@thegivengoproject.org'>steve@thegivengoproject.org</a><p>Steve's Biography");
					break;
				case 'Tori':
					$('#teamDescribe').attr('alt','Tori');
					$('#teamActionFocus').css("background","#FFF url('images/team/tori_action.jpg') no-repeat center center").fadeIn("fast");
					$('#teamDescribe').fadeIn("fast").html("<strong>Tori Jensen</strong><br>Director of Health Administration<br><a href='mailto:tori@thegivengoproject.org'>tori@thegivengoproject.org</a><p>Amber's Biography");
					break;
				case 'Elizabeth':
					$('#teamDescribe').attr('alt','Elizabeth');
					$('#teamActionFocus').css("background","#FFF url('images/team/elizabeth_action.jpg') no-repeat center center").fadeIn("fast");
					$('#teamDescribe').fadeIn("fast").html("<strong>Elizabeth Tollefson</strong><br>Director of Marketing<br><a href='mailto:elizabeth@thegivengoproject.org'>elizabeth@thegivengoproject.org</a><p>Amber's Biography");
					break;
				case 'Pabla':
					$('#teamDescribe').attr('alt','Pabla');
					$('#teamActionFocus').css("background","#FFF url('images/team/pabla_action.jpg') no-repeat center center").fadeIn("fast");
					$('#teamDescribe').fadeIn("fast").html("<strong>Pabla Ayala</strong><br>Director of Public Relations<br><a href='mailto:pabla@thegivengoproject.org'>pabla@thegivengoproject.org</a><p>Amber's Biography");
					break;
				case 'Brent':
					$('#teamDescribe').attr('alt','Brent');
					$('#teamActionFocus').css("background","#FFF url('images/team/brent_action.jpg') no-repeat center center").fadeIn("fast");
					$('#teamDescribe').fadeIn("fast").html("<strong>Brent Brackin</strong><br>Director of Corporate Alliances<br><a href='mailto:brent@thegivengoproject.org'>brent@thegivengoproject.org</a><p>Amber's Biography");
					break;
			}
			
	}
});

</script>

Open in new window

Commented:
If you post the site with the code and the html together, i can help you more with this fadeIn fadeOut thing.

You'll can add a rollOut function which would erase the information as soon as you roll out of the image.

First thing to do is: post the a link to your page or post your entire html page.
Commented:
try like this:

in your html organize your teamActionFocus like this
<div id="teamActionFocus">
    <img src="" />
</div>

Open in new window


Your JavaScript like this:
<script type="text/javascript">
$("img.teamRollover").hover(function(){

	if($(this).attr("alt")!=$("#teamDescribe").attr("alt")){
	var el = $(this);
	    $('#teamDescribe, #teamActionFocus').animate({display: 'none'}, 200, switchinger(el));

			
			
	}
	function switchinger (e) {
	   
	switch(e.attr("alt")){
				case 'Amber':
					$('#teamDescribe').attr('alt','Amber');
					$('#teamActionFocus img').attr("src","/images/team/amber_action.jpg").css({"display":"none"}).fadeIn(1000);
					$('#teamDescribe').fadeIn("slow").html("<strong>Amber Tollefson</strong><br>Founder<br><a href='mailto:amber@thegivengoproject.org'>amber@thegivengoproject.org</a><p>Amber's Biography");
					break;
				case 'John':
					$('#teamDescribe').attr('alt','John');
					$('#teamActionFocus img').attr("src","/images/team/john_action.jpg").css({"display":"none"}).fadeIn(1000);
					$('#teamDescribe').fadeIn("fast").html("<strong>John Galas</strong><br>Director of Soccer Development<br><a href='mailto:galas@thegivengoproject.org'>galas@thegivengoproject.org</a><p>John's Biography");
					break;
				case 'Jillian':
					$('#teamDescribe').attr('alt','Jillian');
					$('#teamActionFocus img').attr("src","/images/team/jillian_action.jpg").css({"display":"none"}).fadeIn(1000);
					$('#teamDescribe').fadeIn("fast").html("<strong>Jillian Meyer</strong><br>Director of Event Coordination<br><a href='mailto:jillian@thegivengoproject.org'>jillian@thegivengoproject.org</a><p>Jillian's Biography");
					break;

/*and so on*/
}
	}
});

Open in new window


this did the effect for me. And the same concept apply to teamDescribe.