динамическое фоновое изображение jQuery

Question

Я хочу динамически менять все фокусное положение с jQuery и после этого изменить размер <h2> на 100%. Мой код выглядит следующим образом:

CSS:

h2 { display: inline-block;} 

JQuery:

$("h2").css("background-position", "0px 0px").animate({ 
    'background-position-x': $(this).width(), 
    'background-position-y': "3px", 
    'width': "100%" 
}); 

Но $(this) не работает, потому что это не функция.

Answer 1

$("h2").css("background-position","0px 0px").each(function() { 
    var h2 = $(this); 
    h2.animate({ 
    'background-position-x': h2.width(), 
    'background-position-y': "3px", 
    'width': "100%" 
    }); 
}); 

Answer 2

Вы должны использовать явный цикл:

$("h2").each(function() { 
    $(this).css("background-position", "0px 0px"); 
    $(this).animate({ 
     'background-position-x': $(this).width() + "px", 
     'background-position-y': "3px", 
     'width': "100%" 
    }); 
});