Question

first off i am a beginer in coding so please bear with me. i have several images on a page forming a navigation bar that will be animated. i am trying to move an element based on what element is moused over. all the images have unique ids and share common names, ie the names for the home icons are “home” and “homeShad”. the idea is when you mouse over home, homeShad will move and being as i have several links im trying to slim my code down. this has led me to here and what im trying to do

$.reset = function()  {
$(this + 'Shad').animate({
    left: '+=100'}, 300)

$('#home').mouseenter(function() {
    $.reset
    })

this doesnt work so i tried this

$.reset = function()  {
$('#'+ $(this).attr("id")+" shad").animate({
    left: '+=100'}, 300)

and still no joy.

('#home').click(function() {
    alert('#'+ this.id + 'shad')
})

this managed to get the alert to show “#homeShad” exactly what im looking for when i tried to animate it there was no joy

hopeing some one can help and i am sorry if i made any mistakes in posting here

Answer 1

Check out this fiddle: http://jsfiddle.net/eVDe3/

Hope this answers your question!
Your code should have been:

$('#home').click(function() {
    $('#'+this.id+'Shad').animate({
        left: '+=100'
    },300);
});

EDIT: If you want to call it by a function, you have to pass $(this).id. Check this updated fiddle here: http://jsfiddle.net/eVDe3/1/
Here’s the corresponding code:

function reset(id) {
    $('#'+id+'Shad').animate({
        left: '+=100'
    },300);
}
$('#home').click(function() {
    reset($(this).attr('id'));
});