Question

I have an image sprite with 9 links. Instead of indicating the value of each link, I’m trying to animate in jQuery, after dynamically finding out the value and moving accordingly.

Here’s the markup:

<div class="compass">
    <a class="north" href="#" alt="North">&nbsp;</a>
    <a class="east" href="#" alt="East">&nbsp;</a>
    <a class="south" href="#" alt="South">&nbsp;</a>
    <a class="west" href="#" alt="West">&nbsp;</a>
    <a class="northeast" href="#" alt="North East">&nbsp;</a>
    <a class="southeast" href="#" alt="South East">&nbsp;</a>
    <a class="southwest" href="#" alt="South West" >&nbsp;</a>
    <a class="northwest" href="#" alt="North West">&nbsp;</a>
</div>

And the jQuery:

var westLeft = +2150;
var westTop = +350;
$(".compass a").click(function(){
    var target = $(this).attr('class');
    var destinationTop = target + 'Top';
    var destinationLeft = target + 'Left';
    $('.map').animate({
        top: destinationTop,
        left: destinationLeft
    }, 1000, 'swing', function(){
        //we're done!
    });
});

So I got destinationTop to dynamically show westTop when I click on the west link, but NOT the actual value of westTop. Same for destinationLeft.

Thank you very much.

Answer 1

You’re basically doing this:

$('.map').animate({
    top: 'eastTop',
    left: 'eastLeft'
}, 1000, 'swing');

and these are not remotely valid values. If you want to overwrite to the existing values:

$('.map').animate({
    top: '2150',
    left: '350'
}, 1000, 'swing');

If you want to add to the existing values:

$('.map').animate({
    top: '+=2150',
    left: '+=350'
}, 1000, 'swing');

http://api.jquery.com/animate/#animation-properties

---

The problem is, I don’t have the values, because it depends on which one of the 9 links the user clicks on, that’s why I’m trying to figure out how to write a variable that grabs the value of the animation depending on the link (or the link’s class). It’s not just about writing in the values manually.

Okay, so you want to use the value in target to identify a variable. You could do this with eval() (don’t); slightly less evil is bracket notation. Assume the variables are window-scoped, and not local:

$(".compass a").click(function(){
    var target = $(this).attr('class');
    var destinationTop = window[target + 'Top'];
    var destinationLeft = window[target + 'Left'];
    $('.map').animate({
        top: destinationTop,
        left: destinationLeft
    }, 1000, 'swing', function(){
        //we're done!
    });
});

Better, however, to just put the values into a dictionary, and again use bracket notation:

var values = {
    westLeft: 2150,
    westTop: 350
};

$(".compass a").click(function(){
    var target = $(this).attr('class');
    var destinationTop = values[target + 'Top'];
    var destinationLeft = values[target + 'Left'];
    $('.map').animate({
        top: destinationTop,
        left: destinationLeft
    }, 1000, 'swing', function(){
        //we're done!
    });
});