JQuery FadeIn - исчезает фоновое изображение div, но не содержимое div?

Question

У меня чертовски много времени пытался понять, как это сделать:

См. http://webid3.feckcorp.com для живого примера проблемы.

I 'Я хотел бы использовать JQuery для постепенного увеличения <div id="home_page_back"> (содержит серый фон с вертикальными линиями позади основного содержимого), но не для постепенного увеличения содержимого перед ним, включенного в <div id="content" class="container">.

Прямо сейчасЯ могу только заставить его исчезнуть все , в то время как я хочу, чтобы фон DIV только исчезал.

Любой, кто может пролить свет на решение и помочь мне в этом 'Буду очень признателен.

Приветствия

решено

Я настроил z-индекс div на -1 и разместил его абсолютно.Просто так:

z-index:-1;
position:absolute;

Answer 1

У вас есть только 2 варианта:
1- Чтобы поместить content div вне home_page_back
2, используйте правило css3: background-color: rgba(255,0,0,1); для content div

Кстати, это чистая проблема CSS, а не проблема jquery: любой прозрачный элемент получит все свои дочерние элементы одинаковыми прозрачными.

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

И вы можете проверить множество решений по этим 2 путям в Google первые результаты поиска.

Твиттер использует этот CSS3

Обновление:
Похоже, что RGBA не поддерживается jquery, так что вы можетедля этого потребуется плагин или просто создайте класс в css и передайте его этому родительскому элементу.

Answer 2

Я думаю, что-то вроде этого должно работать:

$(document).ready(function () {
$("#home_page_back").hide();
$("#content").fadeTo(0, 0);
$("#home_page_back").fadeIn(500, function(){
    $("#content").fadeTo(500, 1);
    });     
});

Вы также можете использовать $("#content").hide();, но, как это, вы, вероятно, получите более плавное затухание, когда вам нужно показать #content.

Answer 3

Поскольку #content является дочерним элементом #home_page_back, исчезновение в родительском элементе естественным образом исчезнет во всех дочерних элементах.Подумайте о том, чтобы извлечь #home_page_back div и поместить его как сестру #content.Вы все еще можете получить необходимые размеры с помощью CSS.