JQuery Animate jump to default image - CSS-Tricks

This topic is empty.

Viewing 3 posts - 1 through 3 (of 3 total)

Author

Posts

June 22, 2011 at 12:28 pm #26080

Participant

Forgive me, I’m a total newbie.

Chris, I’m using your Band Rollover image swap snippet for a project I’m working on. My version, however, doesn’t have a silhouette default image – I only have four images of people – one person on each image is in color. So I’m using the first person in color (guy#1) as the default image. But when I hover off of guy #2’s image map to (for example) guy #3’s image map, the effect flips back to my default guy#1 quickly. In theory, I know this must be because at the end of the animation, the default is guy#1.

Here’s the JQuery

jQuery.noConflict();

$(function() {



var name = "";



$(".horseman").css("opacity", 0);



$(".horseman-image-map").hover(function() {

name = $(this).attr("id");

$("#image-"+name).stop(true, false).show().animate({ opacity: 1 });

}, function() {

name = $(this).attr("id");

$("#image-"+name).stop(true, false).animate({ opacity: 0 }).hide();

});



return false;

});

Here’s the CSS

* { margin: 0; padding: 0; }

#page-wrap { width: 500px; margin: 0 auto; }



#default-horseman {margin-left: -242px; float: left; width: 982px; background: url(guy1.png) no-repeat; padding: 281px 0px 0 1px; position: relative; }



.horseman-image-map { position: absolute; display: block;  height: 269px; top: 0; z-index: 9999; border: none  }

#guy1 { position: absolute; top: 0px; left: 1px; width: 147px; height: 269px; border: none }

#guy2 { position: absolute; top: 0px; left: 148px; width: 120px; height: 269px; border: none }

#guy3 { position: absolute; top: 0px; left: 268px; width: 148px; height: 269px; border: none }

#guy4 { position: absolute; top: 0px; left: 410px; width: 145px; height: 269px; border: none }



.horseman { position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: 1; display: none; opacity: 0; border: none }

#image-guy1 { outline: 0; background: url(guy1.png) no-repeat; border: none }

#image-guy2 { outline: 0; background: url(guy2.png) no-repeat ; border: none }

#image-guy3 { outline: 0; background: url(guy3.png) no-repeat; border: none }

#image-guy4 { outline: 0; background: url(guy4.png) no-repeat; border: none }

Here’s the HTML

Again, I just want to get rid of the quick flash back to the default guy#1 in between image map hovers. I could be going about this all wrong, but your band rollovers thing was basically the effect I wanted to achieve.

June 22, 2011 at 5:14 pm #82141