Why variable won't be passed on?

Question

I have a set of div-s that I need to apply some jQuery to.

<div id="anim1" class="animation"></div>
<div id="anim2" class="animation"></div>

It looks straight forward, but I wanted to make it a bit more flexible. It might not be possible though... ...but instead of copying and pasting the jQuery function as many times as many layers I have I wondered if there was any way to acquire the layer name from a mouseover action and place it into a variable that I can use in the following script:

$(document).ready(function() {

$('.animation').mouseover(function() {
    layer = '#'+this.id;
});

var steps = [0, 50, 100, 150, 200, 250, 300, 350, 400, 450, 500, 550, 600, 650, 700, 750, 800, 850, 900, 950, 1000, 1050, 1100, 1150, 1200, 1250, 1300, 1350, 1400, 1450, 1500, 1550, 1600, 1650, 1700, 1750, 1800, 1850, 1900, 1950, 2000, 2050, 2100, 2150, 2200, 2250, 2300, 2350, 2400, 2450, 2500, 2550, 2600, 2650, 2700, 2750, 2800, 2850, 2900, 2950,];
  var index = -1;
  setTimeout(function() {
         index++;
         if(index == 57) {
           index = 0;
         }
      $(layer).hover(function(){
        index ++;
      }, function(){
        index -=1;
      });
    $(layer).css('backgroundPosition', '-' + steps[index] + 'px 0px');
    setTimeout(arguments.callee, 50);
  }, 25);
});

I was wondering what am I doing wrong here. Any thoughts are much appreciated...

update. Tried to declare the variable in the $(document).ready(function(). I am not sure to be honest if I can do this way, but at least the animations are moving now. The only problem is that both stops when I hover over any of them.:

 $(document).ready(function() {
 layer = $('.animation').mouseover(function() {
    '#'+this.id;
});

Well for one, `*` is not a valid character for a variable name. — Asad Saeeduddin, Dec 08 '12 at 13:34
Yes, I wanted to bold the variable name to be able to see better — Perren, Dec 08 '12 at 13:37
It doesnt look like you declared the variable `layer` also, it needs to be declared global. `var layer;` — VIDesignz, Dec 08 '12 at 13:39
@Perren What are you trying to accomplish here? Do you want to move an element to the left? — Asad Saeeduddin, Dec 08 '12 at 13:39
@VIDesignz It already is global. Note the lack of the `var` keyword — Asad Saeeduddin, Dec 08 '12 at 13:39
@alan_dw Using `this.id` is perfectly acceptable, lighter weight too. — VIDesignz, Dec 08 '12 at 13:40
@Asad Learn something new each day! I had no idea that would make it global. — VIDesignz, Dec 08 '12 at 13:42
thanks guys for thew thoughts. I tried with the 'var' keyword but still not working — Perren, Dec 08 '12 at 13:42
I think the problem is that you are binding the `hover` to an element that hasn't been yet declared on `document ready` — VIDesignz, Dec 08 '12 at 13:44
there is a small animation in each div-s (with moving the background image). I want them to stop on hover. It works ok when I duplicate this script, but would be nicer to be able to use a variable that can pick up the id of the divs on hover... — Perren, Dec 08 '12 at 13:44
That's a goot point VIDesignz, thanks. I tried to amend the code which I will add to the main post above. The animations are moving now which is a progress, but both of them stop if I hover on 'one' of them... — Perren, Dec 08 '12 at 13:49
@Asad You should read this, I looked into your global variable statement http://stackoverflow.com/questions/5786851/define-global-variable-in-a-javascript-function — VIDesignz, Dec 08 '12 at 14:27
@Asad it seems just leaving off `var` is not a reliable way to declare a global variable within a function, thats all... — VIDesignz, Dec 08 '12 at 14:30
@VIDesignz Yeah, but whether or not it is good practice doesn't change the fact that it *is* global. — Asad Saeeduddin, Dec 08 '12 at 14:32

score 0 · Answer 1 · answered Dec 08 '12 at 13:46

You could just set up a variable out side of the scope of the mouse over function and then assign $(this) to that variable inside the function

Var that;

$('.animation').mouseover(function() {
    that = $(this);
});

Then use that to refer to the element outside the. I'm not sure what you're trying to do here, but that's one way to "pass the element on".

Philipp Hofmann · Answer 2 · 2012-12-08T14:20:01.273

When you don't wont to copy your function for each of your divs, I'd use jQuery each

I would give each div a class name:

<div class="anim" class="animation"></div>
<div class="anim" class="animation"></div>

And then assign your effect on each of the elements:

$('.anim').each(function(index_each, element) {

  var steps = [0, 50, 100, 150, 200, 250, 300, 350, 400, 450, 500, 550, 600, 650, 700, 750, 800, 850, 900, 950, 1000, 1050, 1100, 1150, 1200, 1250, 1300, 1350, 1400, 1450, 1500, 1550, 1600, 1650, 1700, 1750, 1800, 1850, 1900, 1950, 2000, 2050, 2100, 2150, 2200, 2250, 2300, 2350, 2400, 2450, 2500, 2550, 2600, 2650, 2700, 2750, 2800, 2850, 2900, 2950,];
  var index = -1;

  setTimeout(function() {
    index++;
    if(index == 57) {
      index = 0;
    }

    $(element).hover(function(){
       index ++;
      }, function(){
            index -=1;
    });

    $(element).css('backgroundPosition', '-' + steps[index] + 'px 0px');
    setTimeout(arguments.callee, 50);
  }, 25);
});

Thanks muffls. This is also a great solution. Works well. I should have tried 'jQuery each'... works like a treat too... Thanks again — Perren, Dec 08 '12 at 14:27

score 0 · Accepted Answer · answered Dec 08 '12 at 14:09

Here you go man...

FIDDLE

$('.animation').each(function() {
    var anim = $(this);

    var steps = [0, 50, 100, 150, 200, 250, 300, 350, 400, 450, 500, 550, 600, 650, 700, 750, 800, 850, 900, 950, 1000, 1050, 1100, 1150, 1200, 1250, 1300, 1350, 1400, 1450, 1500, 1550, 1600, 1650, 1700, 1750, 1800, 1850, 1900, 1950, 2000, 2050, 2100, 2150, 2200, 2250, 2300, 2350, 2400, 2450, 2500, 2550, 2600, 2650, 2700, 2750, 2800, 2850, 2900, 2950 ];
    var index = -1;

    setTimeout(function() {
        index++;
        if (index == 57) {
            index = 0;
        }
        anim.hover(function() {
            index++;
        }, function() {
            index -= 1;
        });
        anim.css('backgroundPosition', '-' + steps[index] + 'px 0px');
        setTimeout(arguments.callee, 50);
    }, 25);

});

Thanks very much VIDesignz. Perfect solution. This is exactly what I was looking for. Haven't thought about usung.each(function() — Perren, Dec 08 '12 at 14:17
Your welcome @Perren ... `.each()` is great for times like these! — VIDesignz, Dec 08 '12 at 14:19

Why variable won't be passed on?

3 Answers3