Изменение «x» в background-position: «x» px «y» px с использованием jQuery / Javascript для класса - PullRequest
Новая
       29

Изменение «x» в background-position: «x» px «y» px с использованием jQuery / Javascript для класса

2 голосов
/ 13 января 2012

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

Я достиг этого с этим: 

$(".socButton").hover(function(){
        var iD = $(this).attr("id");

        var pos = $("#" + iD).css("background-position");

        var splitPos = pos.split("px");

        splitPos[0] = parseInt(splitPos[0]) += 24;

        newPos = splitPos.join("px");

        alert(newPos);

}, function(){

});

но переменная newPos просто не предупреждает.Я попробовал несколько более простых способов просто изменить "background-position-x", но без кубиков.

Я не уверен, что мне нужно идентифицировать id элемента, чтобы изменить его, ноименно идентификатор имеет фоновую позицию в таблице стилей, а не класс, поэтому я не совсем уверен.

Любое руководство очень ценится.

Заранее спасибо.

РЕДАКТИРОВАТЬ: Я чувствую, что я должен также указать, это было предупреждение, прежде чем я добавил parseInt, но некоторые странные результаты были получены до того, как я добавил его.

1 Ответ

1 голос
/ 13 января 2012

Нет, вам не нужен идентификатор элемента.jQuery применяет встроенные стили.

В любом случае, было бы проще, если бы в вашем CSS было второе правило для .socButton, то есть .socButton.hover, которое бы имело правильную позицию фона для состояния наведения.В jQuery вам нужно будет только переключить класс hover с помощью $(this).toggleClass('hover').

http://jsfiddle.net/Rn6f4/

$(".socButton").hover(function() {
    var pos = $(this).css("background-position");

    var splitPos = pos.split("px");

    splitPos[0] = parseInt(splitPos[0]);
    splitPos[0] += 24.0;

    newPos = splitPos.join("px");

    alert(newPos);
    $(this).css({"background-position": newPos});

}, function(){

});
...