Forums

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?

kgscott284

.next()

"Get the immediately following sibling of each element in the set of matched elements. If a selector is provided, it retrieves the next sibling only if it matches that selector."

source: http://api.jquery.com/next/

cpyle0819

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

treehouse : what would you like to learn today?

Forums

[Solved] Impractical Script, need a clean solution.