Переключить положение фона с помощью jQuery - PullRequest
Новая
       25

Переключить положение фона с помощью jQuery

0 голосов
/ 07 февраля 2012

Я новичок в jQuery, и у меня возникли некоторые проблемы с попыткой заставить что-то работать.

В основном у меня есть сайт WordPress, на каждой странице есть разное фоновое изображение для тега body. Я хочу иметь возможность переключаться на кнопку, а затем фоновое изображение тела уменьшиться примерно на 500 пикселей.

В основном у меня есть скрытая область контактов в верхней части моей страницы, и когда вы нажимаете на кнопку (a.contact), скрытая область контактов (#contactArea) открывается при опускании сверху, однако, когда contactArea удаляет часть моего фонового изображения, пока вы не нажмете кнопку еще раз.

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

мой код CSS: 

body.page.page-id-240 {
   background:url(images/main-home-bg.jpg) center 600px no-repeat;
}

Мой текущий jquery: 

$(window).load(function() {
    $("#contactArea").css('height', '0px');

    $("a.contact").toggle( 
        function () { 
            $("#contactArea").animate({ height: "225px" }, { queue:false, duration: 500, easing: 'linear' } )
        }, 
        function () { 
            $("#contactArea").animate({ height: "0px" }, { queue:false, duration: 500, easing: 'linear' }) 
        } 
    ); 
});

Если бы кто-нибудь мог помочь, это было бы очень признательно! : -)

1 Ответ

0 голосов
/ 07 февраля 2012

Попробуйте это: 

$("a.contact").toggle( 
    function () { 
        $("#contactArea").animate({ height: "225px" }, { queue:false, duration: 500,  easing: 'linear' } )
        $("body.page.page-id-240").animate({ backgroundPosition: "center 825px" });
    }, 
    function () { 
        $("#contactArea").animate({ height: "0px" }, { queue:false, duration: 500, easing: 'linear' }) 
        $("body.page.page-id-240").animate({ backgroundPosition: "center 600px" });
    } 
);
...