jQuery animate() backgroundPosition не работает нормально

У меня есть этот простой HTML:

<span class="coverImg" style="background-image:url('images/show2.jpg');"></span></a>

и немного Javascript:

$(function() {
            $(".coverImg").hover(function() {
                $(this).animate({
                    backgroundPosition : "0 0"
                }, "fast");
            }, function() {
                $(this).animate({
                    backgroundPosition : "50% 50%"
                }, "fast");
            });
        });

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

В чем проблема? Что я пропустил?

OR:

$(function() {
            $(".coverImg").mouseover(function() {
                $(this)
                .animate({
                    "background-position-x" : "-=20px",
                    "background-position-y" : "-=20px"
                }, "fast");
            }).mouseout(function() {
                $(this).animate({
                    "background-position-x" : "0 ",
                    "background-position-y" : "0"
                }, "fast");
            })
        })

это работает только в Chrome...

так еще раз в чем проблема! в чем ошибка! что я пропустил?!


jquery background-image jquery-animate background-position
person Lien    schedule 18.01.2012    source источник
comment
Пожалуйста, опубликуйте свое решение ниже, а затем примите свой собственный ответ. Это самый правильный способ ответить на свои вопросы здесь.   -  person Sparky    schedule 18.01.2012
comment
о, я вижу, простите меня в первый раз, и на самом деле я ошибался в своем собственном решении ....   -  person Lien    schedule 18.01.2012

Ответы (2)


arrow_upward
3
arrow_downward

Я не думаю, что jQuery может анимировать фоновые позиции по умолчанию — я использую http://archive.plugins.jquery.com/project/backgroundPosition-Effect

Стандартный CSS не поддерживает background-position-x и background-position-y, только некоторые поддерживают это, например Chrome.

И метод jQuery animate() не поддерживает анимацию двух значений одновременно, это когда-нибудь окажется ошибкой или просто ничего не сделает в некоторых браузерах.

В конце концов, проверьте это http://snook.ca/archives/javascript/jquery-bg-image-animations. Должен быть плагин jQuery под названием jQuery.bgpos.js, который очень хорошо работает, если вы хотите анимировать положение фона.

Код такой:

(function($) {
$.extend($.fx.step, {
    backgroundPosition : function(fx) {
        if(fx.state === 0 && typeof fx.end == 'string') {
            var start = $.curCSS(fx.elem, 'backgroundPosition');
            start = toArray(start);
            fx.start = [start[0], start[2]];
            var end = toArray(fx.end);
            fx.end = [end[0], end[2]];
            fx.unit = [end[1], end[3]];
        }
        var nowPosX = [];
        nowPosX[0] = ((fx.end[0] - fx.start[0]) * fx.pos) + fx.start[0] + fx.unit[0];
        nowPosX[1] = ((fx.end[1] - fx.start[1]) * fx.pos) + fx.start[1] + fx.unit[1];
        fx.elem.style.backgroundPosition = nowPosX[0] + ' ' + nowPosX[1];
        function toArray(strg) {
            strg = strg.replace(/left|top/g, '0px');
            strg = strg.replace(/right|bottom/g, '100%');
            strg = strg.replace(/([0-9\.]+)(\s|\)|$)/g, "$1px$2");
            var res = strg.match(/(-?[0-9\.]+)(px|\%|em|pt)\s(-?[0-9\.]+)(px|\%|em|pt)/);
            return [parseFloat(res[1], 10), res[2], parseFloat(res[3], 10), res[4]];
        }

    }
});})(jQuery);
person circusdei    schedule 18.01.2012
comment
Спасибо! я проверю это. и я нашел другие способы решить проблему, проверьте мой РЕДАКТИРОВАТЬ! Он отлично работает для меня! - person Lien; 18.01.2012
comment
я только что обнаружил, что это работает только в Chrome, даже не в Firefox ... это должно быть ошибка .... - person Lien; 18.01.2012
comment
демонстрация: protofunc.com/scripts/jquery/backgroundPosition работает в Firefox... убедитесь, что эта строка: background-position-x : 0 соответствует примеру. - person circusdei; 18.01.2012
comment
у вас работает пример сайта в моем последнем комментарии? (пытаюсь сузить ошибки) - person circusdei; 19.01.2012
comment
оно работает! что вы имеете в виду, убедитесь, что эта строка: background-position-x :'0 'соответствует примеру? - person Lien; 19.01.2012
comment
я проверил много вопросов, background-position-x не является стандартным свойством css, и метод animate() не может правильно анимировать два значения в каждом браузере, поэтому на самом деле ваш первый ответ правильный, проверьте этот ссылка, сайт плагина jquery не работает, и вы можете найти плагин там ! большое спасибо ! - person Lien; 19.01.2012

arrow_upward
2
arrow_downward

Похоже, вы используете жесткий подход с jQuery. Это можно сделать только с помощью css:

span {
    background: url(yourimage.jpg) top left no-repeat;
    transition: all 3s ease-in-out;
}

span:hover {
    background-position: 50% 50%;
}

Изменение положения фона будет анимировано в современных браузерах и будет просто статическим изменением в IE8 и ниже.

Вы также можете добавить префиксные версии свойства transition для других браузеров:

-webkit-transition:  
-moz-transition:  
-o-transition:  
transition:
person HandiworkNYC.com    schedule 18.01.2012
comment
Спасибо ! -o-transition означает Opera, верно? я имею в виду, что он должен нормально работать в опере, но это не так, он подключен .... и IE9 тоже не так хорошо поддерживает. хром и FF работают очень хорошо... может у меня другая ошибка? - person Lien; 18.01.2012
comment
я думаю -e-transition: для IE9 - person circusdei; 19.01.2012