asked on

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:

mcnute

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

Imaginx

ASKER

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.

Imaginx

ASKER

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 ..

Imaginx

ASKER

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.

Imaginx

ASKER

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.

Imaginx

ASKER

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

mcnute

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.

Imaginx

ASKER

http://stevenwaskey.com/gngproject/main.php?content=team

ASKER CERTIFIED SOLUTION

mcnute

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial