Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Estevao Acioli CE

[Resolvido] Efeito Fade in e Fade out não funciona no IE8

Por , em Javascript

Recommended Posts

Estevao Acioli CE    0

Estevao Acioli CE
Postado

Olá pessoal sou novato na programação WEB e estou precisando muito de uma ajuda. O problema é o seguinte estou desenvolvendo um site com navegação horizontal, até ai tudo beleza, só que o cliente que um efeito fade out e fade in toda vez que uma opção do menu for acionada, explico melhor, além do site correr na horizontal ele deve apresentar um rápido efeito de sumir e aparecer entre um seguimento e outro,abaixo disponho o meu codigo html simplificado

<body>
<div class="art-nav">
                	<div class="l"></div>
                	<div class="r"></div>
                	<ul id='fade' class="art-menu">
                		<li>
               			  <a href="#item1" class="panel" id='fade1'><span class="l"></span><span class="r"></span><span class="t">Home</span></a>                		</li>
                		<li>

                			<a href="#item2" id='fade2' class="panel"><span class="l"></span><span class="r"></span><span class="t">A marca</span></a>                		</li>		
                		<li>
                			<a href="#item3" id='fade3' class="panel"><span class="l"></span><span class="r"></span><span class="t">Colecões</span></a>                		</li>
                        <li>
                			<a href="#item4" id='fade4' class="panel"><span class="l"></span><span class="r"></span><span class="t">Making Of</span></a>                		</li>
                            <li>
                			<a href="#item5" id='fade5' class="panel"><span class="l"></span><span class="r"></span><span class="t">Imprensa</span></a>                		</li>
                            <li>
                			<a href="#item6" id='fade6' class="panel"><span class="l"></span><span class="r"></span><span class="t">Onde Encontrar</span></a>                		</li>
                        <li>
                			<a href="#item7" id='fade7' class="panel"><span class="l"></span><span class="r"></span><span class="t">Contato</span></a>                		</li>
                        <li>
                			<a href="#item8" id='fade8' class="panel"><span class="l"></span><span class="r"></span><span class="t">Cadastro</span></a>                		</li>
                            <li>
                			<a href="#item9" id='fade9' class="panel"><span class="l"></span><span class="r"></span><span class="t">Catálogo</span></a>                		</li>
                            <li>
                			<a href="#" class="panel"><span class="l"></span><span class="r"></span><span class="t">English Version</span></a>                		</li>
                            
                	</ul>
                </div>
<!--Final Menu-->

<div class="clear"></div>
<!-- Logo -->
<!-- Corpo do site-->
<div id="wrapper">
  <div id="mask">

		<div id="item1" class="item">
			<a name="item1"></a>
			<div class="content1" id="content1">
            <div class="conteudo">
Conteudo 1
       </div> 
				
		  </div><!-- End 1-->
		</div><!--End 1 -->
		
		<div id="item2" class="item">
			<a name="item2"></a>
			<div class="content2">
            <div class="conteudo">
 Conteudo 2           
            </div>

			</div><!--End 2 -->
		</div><!--End 2 -->
		
		<div id="item3" class="item">
			<a name="item3"></a>
			<div class="content3">
            <div class="conteudo">
Conteudo 3           
             </div>
			</div><!--End 3 -->
		</div><!--End 3 -->

		<div id="item4" class="item">
			<a name="item4"></a>
			<div class="content4">
           <div class="conteudo">
 Conteudo 4
  </div> 
			</div><!--End 4 -->
		</div><!--End 4 -->
		
		<div id="item5" class="item">
			<a name="item5"></a>
			<div class="content5">
            <div class="conteudo" >
Conteudo 5
</div>
			</div><!--End 5 -->
		</div><!--End 5 -->
        
<div id="item6" class="item">
			<a name="item6"></a>
		  <div class="content6">
          <div class="conteudo" >
Conteudo 6
</div>
			</div><!--End 6 -->
		</div><!--End 6 -->
        
        <div id="item7" class="item">
			<a name="item7"></a>
		  <div class="content7">
          <div class="conteudo" >
Conteudo 7
</div>  
			</div><!--End 7 -->
		</div><!--End 7 -->
        
        <div id="item8" class="item">
			<a name="item8"></a>
		  <div class="content8">
          <div class="conteudo">
Conteudo 8                   
</div>
			</div><!--End 8 -->
		</div><!--End 8 -->
        
        <div id="item9" class="item">
			<a name="item9"></a>
		  <div class="content9">
          <div class="conteudo">
Conteudo 9
            </div>
			</div><!--End 9 -->
		</div><!--End 9 -->

	</div><!--End Site -->
</div><!--End Site -->


</body>
</html>

Agora disponho o codigo Java script que desenvolvi, mas uma vez quero lembrar que sou iniciante srsrsrs, mas funcionou em todos os navegadores menos no bendito explorer 8

// JavaScript Document
$(document).ready( function () {
$("#fade1").click ( function () {
$(".item").fadeOut(500);
})
$("#fade1").click ( function () {
$(".item").fadeIn(500);
})
});

$(document).ready( function () {
$("#fade2").click ( function () {
$(".item").fadeOut(500);
})
$("#fade2").click ( function () {
$(".item").fadeIn(500);
})
});

$(document).ready( function () {
$("#fade3").click ( function () {
$(".item").fadeOut(500);
})
$("#fade3").click ( function () {
$(".item").fadeIn(500);
})
});

$(document).ready( function () {
$("#fade4").click ( function () {
$(".item").fadeOut(500);
})
$("#fade4").click ( function () {
$(".item").fadeIn(500);
})
});

$(document).ready( function () {
$("#fade5").click ( function () {
$(".item").fadeOut(500);
})
$("#fade5").click ( function () {
$(".item").fadeIn(500);
})
});

$(document).ready( function () {
$("#fade6").click ( function () {
$(".item").fadeOut(500);
})
$("#fade6").click ( function () {
$(".item").fadeIn(500);
})
});

$(document).ready( function () {
$("#fade7").click ( function () {
$(".item").fadeOut(500);
})
$("#fade7").click ( function () {
$(".item").fadeIn(500);
})
});

$(document).ready( function () {
$("#fade8").click ( function () {
$(".item").fadeOut(500);
})
$("#fade8").click ( function () {
$(".item").fadeIn(500);
})
});

$(document).ready( function () {
$("#fade9").click ( function () {
$(".item").fadeOut(500);
})
$("#fade9").click ( function () {
$(".item").fadeIn(500);
})
});

explicando: o menu possui nove opções cada opção deve disparar a ação de fade out e fade in no elemento de classe item, o problema ´q eu o explorer não aceita uma classe neste tipo de código, não sei por que, mas se eu trocar a classe por uma ID ele funciona, mas o problema é que só posso ter uma id com um certo nome por página, como poderia fazer para selecionar todas as ids que pretendo aplicar o efeito ao mesmo tempo?

 

Se eu fizer assim o IE8 aceita

$(document).ready( function () {
$("#fade1").click ( function () {
$("#item1").fadeOut(500);
})
$("#fade1").click ( function () {
$("#item1").fadeIn(500);
})
});

Como poderia fazer para cada opção do menu aplicar o efeito fade em todos os #item1,#item2,#item3,#item4,#item5,#item6,#item7,#item8,#item9 ou #content1,#content2,#content3,#content4,#content5,#content6,#content7,#content8,#content9

 

Desde já agradeço pela a ajuda.

Aqui está o endereço de teste do projeto http://teste.aciolidesign.com.br/

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

Vamos corrigir aos poucos:

-> só deve existir uma unica chamada ao document.ready

$(document).ready(function(){
	$("#fade1").click ( function () {
		$(".item").fadeOut(500);
	});
	
	//..
	$("#fade2").click ( function () {
		$(".item").fadeOut(500);
	});
	
	//...
});
entendeu ? então você coloca tudo que precisar dentro de um unico instaciamento.

 

hum... está bem estranho isso, por demais.. mas vamos prosseguir:

oque você pediu, é possível.. jQuery aceita:

$("#item1,#item2,#item3,#item4,#item5,#item6,#item7,#item8,#item9").click ( function () {
só que isso é bem monstruoso, e desnecessário...

 

<html>
<head>
	<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
	<script type="text/javascript">
	$(document).ready(function(){
		$("#mask > div").hide();
		
		$("#art-menu a").click(function( e ){
			e.preventDefault();
			
			var href = $( this ).attr('href');
			$("#mask > div").hide();
			$( href ).fadeIn( 'slow' );
		});
	});
	</script> 
</head>
<body>

	<ul id="art-menu">
		<li><a href="#item1">Home</a></li>
		<li><a href="#item2">A marca</a></li>           
		<li><a href="#item3">Colecões</a></li>
		<li><a href="#item4">Making Of</a></li>
		<li><a href="#item5">Imprensa</a></li>
		<li><a href="#item6">Onde Encontrar</a></li>
	</ul><!-- /art-menu -->


	<div class="clear"></div>

	<div id="mask">
		<div id="item1">
			Conteudo 1
		</div><!-- /item1 -->
		<div id="item2">
			Conteudo 2
		</div><!-- /item2 -->
		<div id="item3">
			Conteudo 3
		</div><!-- /item3 -->
		<div id="item4">
			Conteudo 4
		</div><!-- /item4 -->
		<div id="item5">
			Conteudo 5
		</div><!-- /item5 -->
		<div id="item6">
			Conteudo 6
		</div><!-- /item6 -->

	</div><!-- /mask -->


</body>
</html>

Compartilhar este post

Link para o post
Compartilhar em outros sites

Estevao Acioli CE    0

Estevao Acioli CE
Postado

Olá Bruno muito obrigado pela sua ajuda o seu código resolveu o problema aqui. Só precisei fazer uma alteração para se adaptar ao meu caso foi a seguinte

<script type="text/javascript">
        $(document).ready(function(){
                $("#mask > div").hide();
                
                $("#art-menu a").click(function( e ){
                        e.preventDefault();
                        
                        var href = $( this ).attr('href');
                        $("#mask > div").hide();
                        $( href ).fadeIn( 'slow' );
                });
        });
        </script>

Mudei o primeiro .hide para .show e ai ficou beleza valeu mesmo obrigado

<script type="text/javascript">
        $(document).ready(function(){
                $("#mask > div").show();
                
                $("#art-menu a").click(function( e ){
                        e.preventDefault();
                        
                        var href = $( this ).attr('href');
                        $("#mask > div").hide();
                        $( href ).fadeIn( 'slow' );
                });
        });
        </script>

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Javascript
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito