jQuery .animate () не анимирует backgroundPosition в IE - PullRequest
Новая
       21

jQuery .animate () не анимирует backgroundPosition в IE

0 голосов
/ 17 июня 2010

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

        $(document).ready(function() {
        $('#email_campaigns').click(function(){
            var width = $(window).width();
            width = (width / 2) - 700;

            if($('#email_campaigns_box').css('display') == 'none'){
                //$('body').css('background-position','center 119px');
                $('body').animate({
                    backgroundPosition: (width + "px 119px")
                }, {duration:500});
            } else {
                //$('body').css('background-position','center top');
                $('body').animate({
                    backgroundPosition: (width + "px 0px")
                }, {duration:500});
            }

            $('#email_campaigns_box').slideToggle("slow");
            $('#client_login_box').slideUp("slow");             
        });

        $('#client_login').click(function(){
            var width = $(window).width();
            width = (width / 2) - 700;

            alert(width);

            if($('#client_login_box').css('display') == 'none'){
                //$('body').css('background-position','center 119px');
                $('body').animate({
                    backgroundPosition: (width + "px 119px")
                }, {duration:500});
            } else {
                //$('body').css('background-position','center top');
                $('body').animate({
                    backgroundPosition: (width + "px 0px")
                }, {duration:500});
            }

            $('#client_login_box').slideToggle("slow");
            $('#email_campaigns_box').slideUp("slow");              
        });
    });

Я не могу передать «центр», так как он будет принимать только числовые значения.Моя цель состоит в том, чтобы вычислить центр страницы в пикселях (width = (width / 2) - 700;), а затем анимировать его в это грубое положение (оно обычно выходит на несколько пикселей из-за полос прокрутки, а затем принудительно перемещаться в центриспользование вызова .css ().

Проблема в том, что IE не хочет играть в мяч. IE вообще не анимируется. Firefox / Safari / Chrome все работают как положено.

Нижеживой пример: http://recklessnewmedia.com/new/# (нажмите «Кампании по электронной почте» вверху).

Спасибо

1 Ответ

1 голос
/ 17 июня 2010

Я бы посоветовал поместить фон в div контейнера для нижней части сайта. Затем разверните логин выше и позвольте браузеру сделать всю работу за вас!

Простая демонстрация базовой функциональности здесь:

http://jsfiddle.net/UkGva/

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

И это также должно работать с полосами прокрутки и всем прочим (я видел, что это было не так даже в работающем браузере, таком как Chrome) И вы бы написали меньше javascript!

...