Fórum Fundo Dinâmico jQuery #417539
27/05/2012
0
Gostaria de tirar uma dúvida com vocês.
Estou desenvolvendo um site, porém estou com problemas na alteração do background dinamicamente com jquery.
A estrutura do meu site está da seguinte forma:
<body>
<div id=site>
<!--todo o conteúdo do site aqui!-->
</div>
</body>
O background do site está assim:
style.css --> body{background:url(image.png) no-repeat;}
Eu peguei esse código pronto na internet:
<style type=text/css>
#background1{background:url(background_1.png) no-repeat;}
#background2{background:url(background_2.png) no-repeat;}
#background3{background:url(background_3.png) no-repeat;}
#background4{background:url(background_4.png) no-repeat;}
.bg{
position: absolute;
width: 100%;
height: 100%;
background-position: center bottom;
background-repeat: no-repeat;
}
</style>
<script type=text/javascript src=jquery.js></script>
<script type=text/javascript>
$(document).ready(function(){
/* Classe padrão dos backgrounds */
var bgClass = div.bg;
/* Prefixo para IDs dos backgrounds */
var bgPrefix = background;
/* Tempo para fade in-out */
var fade = 3000;
/* Não precisa alterar estas =P */
var bgSize = $(bgClass).size();
var curSize = 1;
var timerSrc = ;
/* Mostra apenas o primeiro bg */
$(bgClass).hide();
$(bgClass + :first).show();
/* Se houver divs com classes BG */
if (bgSize){
/* Inicia o loop dos backgrounds */
timerSrc = setInterval (function (){
/* Oculta um fundo e exibe outro */
$(# + bgPrefix + curSize).fadeOut(2000);
curSize = (curSize >= bgSize) ? 1 : curSize + 1;
$(# + bgPrefix + curSize).fadeIn(1000);
}, fade);
}
});
</script>
Para funcionar, eu deixo o script do site assim:
<body>
<div id=background1 class=bg></div>
<div id=background2 class=bg></div>
<div id=background3 class=bg></div>
<div id=background4 class=bg></div>
<div id=site>
<!--todo o conteúdo do site aqui!-->
</div>
</body>
O background do site está assim:
style.css --> body{sem puxar a imagem de fundo por aqui.}
O fundo altera sem falhas, o problema é que esconde o conteúdo do site e só aparece na transição das imagens.
Alguém sabe me dizer como posso resolver esse problema?
Obrigado!
Abraão Marques
Curtir tópico
+ 0Posts
04/06/2012
Ricardo Arrigoni
No seu caso eu acho que você teria que criar uma função e nessa função definir a que momento determinado background iria ser usado.(Muito comum quando usam um background para o dia e outro para a noite)
O ideal seria não criar divs para cada background, e sim usar a própria div body mesmo, em último caso criar uma única div para usar só o background.
abs
Gostei + 0
07/06/2012
Abraão Marques
Tentarei fazer isso.
Gostei + 0
08/06/2012
Ricardo Arrigoni
Se conseguir depois posta como fez pra resolver aqui :)
abs
Gostei + 0
24/08/2012
Ricardo Arrigoni
Gostei + 0
Clique aqui para fazer login e interagir na Comunidade :)