Impractical Script, need a clean solution.

[cpyle0819]

Hey folks,
Here is a site with some JavaScript that does EXACTLY what I want it to do. The problem is that I’m going to want to apply this same script to multiple images/spans. If I just list multiple elements before the .rotate I’m afraid I’ll see the rotation of all of my images when I hover over one. I also don’t want to write a separate function for each element because that’s just clunky. I was hoping for some solutions to clean this up so I can apply my script to any element.
Thanks,
Corey

P.S. I know this doesn’t work in IE except for 9 and right now I’m ok with that.

$(document).ready(function(){

$("#sevendoors").rotate({bind:{

mouseenter: function(){

$("#sevendoors").rotate({

duration:6000,

animateTo: 45,

easing: $.easing.easeOutElastic,

});

$('#span1').removeClass('span1').addClass('span1retrieve');

},



mouseleave: function(){

$("#sevendoors").rotate({

duration:6000,

animateTo: 0,

easing: $.easing.easeOutElastic,

});

$('#span1').removeClass('span1retrieve').addClass('span1');



}

}

});

});

[Mottie]

I would add a class name to all of the items, something like “menu” then change the id’s inside the function to $(this), then for the span, use $(this).next(). So the modified code would look like this:

$(function(){



$(".menu").rotate({

bind:{

mouseenter: function(){

$(this).rotate({

duration:6000,

animateTo: 45,

easing: $.easing.easeOutElastic,

});

$(this).next().removeClass('span1').addClass('span1retrieve');

},



mouseleave: function(){

$(this).rotate({

duration:6000,

animateTo: 0,

easing: $.easing.easeOutElastic,

});

$(this).next().removeClass('span1retrieve').addClass('span1');

}



}

});



});

[cpyle0819]

Well that kind of worked. Everything is independent but now I have a strange rotation on the second picture. I’ve updated the site so the link is still good. Also, what does .next do?

[cpyle0819]

Um…/blush. Ignore the bad rotation…I forgot to resize my anchor block….lol

[Author]

Posts