JQuery фоновое изображение перемещается по клику - PullRequest
Новая
       2

JQuery фоновое изображение перемещается по клику

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

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

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

Мой код CSS: 

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

Обновление

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

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

Мой текущий 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'}) 
                } 
        ); 


});

Ответы [ 2 ]

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

Не могли бы вы более подробно рассказать о выпадении. (При выпадении в 500px фон выше будет белым). Я предполагаю, что размер вашего изображения больше необходимого фона, поэтому даже после выпадения внизу будет некоторая часть изображения.

Сначала в CSS: 

body
{
background-position:0px 0px; 
}

тогда в jquery 

$("#btn").click(function(){
$("body").css({"background-position":"0px 500px"});
});

то же самое можно сделать с функцией .animate, используя div вместо body.

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

Вот пример привязки к элементу и изменения CSS другого элемента в обработчике событий: 

//bind a `click` event handler to the element with the ID of `button-id`
$('#button-id').on('click', function () {

    //now select the `body` element and change it's CSS background property
    $('body').css('background', 'url(/images/main-home-bg.jpg) center 600px no-repeat');
});

Обратите внимание, что .on() является новым в jQuery 1.7 и совпадает с .bind() вболее старые версии.

Если вы хотите изменить только положение фонового изображения, вы можете использовать свойство background-position вместо свойства background: 

$('#button-id').on('click', function () {
    $('body').css('background-position', 'center 100px');
});

Вотдемоверсия: http://jsfiddle.net/DkUwM/1/

Обновление 

$(window).load(function() {
    $("#contactArea").css('height', '0px');
    $("a.contact").toggle(
                function () {
                    $('body').css('background-position', 'center 600px');
                    $("#contactArea").animate({height: "225px"}, {queue:false, duration: 500, easing: 'linear'} )
                },
                function () {
                    $('body').css('background-position', 'center top');
                    $("#contactArea").animate({height: "0px"}, {queue:false, duration: 500, easing: 'linear'})
                }
        );
});

Здесь вы можете изменить положение background-image, прикрепленного к элементу body, при нажатии на элемент a.contact.

Если вы хотите анимировать изменение свойства background-position, вам нужно будет включить некоторый код, который обновляет jQuery, чтобы это можно было сделать: http://www.protofunc.com/scripts/jquery/backgroundPosition/

Вот примеранимация свойства background-position: 

$(window).load(function() {
    $("#contactArea").css('height', '0px');
    $("a.contact").toggle(
                function () {
                    $('body').animate({
                       'background-position' : '50% 600px'
                    }, 500);
                    $("#contactArea").animate({height: "225px"}, {queue:false, duration: 500, easing: 'linear'} )
                },
                function () {
                    $('body').animate({
                       'background-position' : '50% 0'
                    }, 500);
                    $("#contactArea").animate({height: "0px"}, {queue:false, duration: 500, easing: 'linear'})
                }
        );
});

Вот демонстрационная версия: http://jsfiddle.net/DkUwM/4/

Обратите внимание, что вы можете использовать background-position-x и background-position-y, но они не поддерживаются в Firefox (они не включены в спецификацию W3C, но реализованы в Internet Explorer.

...