Получение значения CSS из $ (this) в jQuery - PullRequest
Новая
       21

Получение значения CSS из $ (this) в jQuery

1 голос
/ 12 февраля 2010

Итак, у меня есть рабочий код, который анимирует изображение BG через плагин. Это общее решение, хотя каждый элемент в классе имеет одно и то же BG-изображение; Я использую спрайт с уникальным изображением для каждого столбца моей панели навигации. Код таким образом: 

$('#nav a')
.mouseover(function(){
    $(this).stop().animate(
        {backgroundPosition:"(0 -250px)"}, 
        {duration:500})
    })
.mouseout(function(){
    $(this).stop().animate(
        {backgroundPosition:"(0 0)"}, 
        {duration:500})
    })

Это прекрасно работает, поэтому я могу установить Y-смещение для каждого элемента, но у каждой ссылки есть свое собственное X-смещение, которое вообще не будет изменяться / анимироваться. Пример CSS: 

li.downloads a {
    background:url(img/navsprite.png) repeat -318px -9px;
}

Я хочу свернуть -318px -9px во что-то вроде -318px 200px, но для другого элемента я бы хотел изменить -482px -9px на -482px 200px. Должно измениться только Y-смещение, но я не знаю синтаксис jQuery достаточно хорошо, чтобы извлечь это значение из CSS элемента $ (this) и поместить его в параметры animate. Спасибо!

Ответы [ 3 ]

5 голосов
/ 12 февраля 2010

Вы можете получить положение фона следующим образом: 

$(this).css("background-position");

Вы можете получить оба значения в массиве следующим образом: 

var bgpos = $(this).css("background-position").split(" ");

, который позволяет вам получить доступ к обоим значениям с bgpos[0] и bgpos[1].

0 голосов
/ 12 февраля 2010 
jQuery.fn.getBackgroundxPosition = function(val) {
    var position = $(this).css('background-position');
    var position_array=val.split(' ');
    var x_pos = position_array[0];

    if(typeof(position) === 'undefined'){ //IE fix
        x_pos = $(this).css('background-position-x');
    }
return x_pos;
};

Я думаю, что это будет работать (не проверено)

0 голосов
/ 12 февраля 2010

Существует свойство css background-position-x. Однако это доступно только в IE, поэтому, вероятно, не является правильным решением вашей проблемы.
jQuery поддерживает относительную анимацию, указав f.e. + = 50px;
Не знаю, работает ли он, но вы можете попробовать следующий код: 

$('#nav a')
.mouseover(function(){
    $(this).stop().animate(
        {backgroundPosition:"(+=0 -250px)"}, 
        {duration:500})
    })
.mouseout(function(){
    $(this).stop().animate(
        {backgroundPosition:"(+=0 0)"}, 
        {duration:500})
    })
...