Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Bom dia!
dei uma pesquisada aqui no fórum e a solução que eu achei era para "aplicação" de fade ao carregar apenas uma div por ajax.
sou bem leigo nesse assunto de ajax, então provavelmente a "coisa" que eu quero deve ser mais simples do que eu penso...
tenho o seguinte código, o qual, ao clicar em um link do menu, ele carrega uma página em suas respectivas div, no casa, ttexto e contexfado...
jQuery(document).ready(function(){
var ttexto = $('div.ttexto');
var contexfado = $('div.contexfado');
request( 'index.html');
function m_load( data )
{
var text = $( '<div>'+data+'</div>' );//forçando o parser
ttexto.html( text.find('div.ttexto').html() );
contexfado.html( text.find('div.contexfado').html() );
}
function request( file )
{
$.ajax({
url: file,
success: function( data )
{
m_load( data );
}
});
}
loading = new Image(); loading.src = 'loading.gif';
$('div.menu a').click(function( e ){
e.preventDefault();
request( $( this ).attr('href') );
contexfado.html( '<img src="loading.gif" hspace="325px" vspace="150px" />' );
$('div.contexfado').load('lightbox.html',
function(){
$('a[@rel*=lirios]').lightBox();
$('a[@rel*=tulipas]').lightBox();
$('a[@rel*=callas]').lightBox();
$('a[@rel*=glad]').lightBox();
$('a[@rel*=orqui]').lightBox();
$('a[@rel*=ranun]').lightBox();
}
);
});
});
O que eu preciso é do seguinte, ao clicar, os dois conteúdos saiam em fade(fadeOut) e entrem em fade(fadeIn). Ou simplesmente apenas entrem em fadein
Achei esse código aqui no fórum, porém não consigo "encrementar" no meu. O máximo que consegui é
o fadeOut, poré como as divs tem um background-img, ela some junto....
<script type="text/javascript">
$(document).ready(function(){
//ícone de carregando está em uma div #carregando já posicionado na página
$("#carregando").hide();
var content = $('#conteudo');
$('#topo a').live('click',function( e ){
$("#carregando").fadeIn("slow");
e.preventDefault();
content.fadeOut("slow");
var href = $( this ).attr('href');
$.ajax({
url: href,
success: function( response ){
//forçando o parser
var data = $( '<div>'+response+'</div>' ).find('#conteudo').html();
//Apaga o content, carrega os dados, fadeIn no content e fadeOut na div #carregando
content.fadeOut("slow", function(){
content.html( data ).fadeIn("slow");$("#carregando").fadeOut("slow");});}
});
});
});
</script>
É mais facil colocar fadeToggle.
Assim:
isso resolveria?