jquery - fadeOut() and fadeIn() in the same action -
i'm trying use jquery make languaje selection nav and, once selected, fade out nav @ same time display second nav using fade in.
this markup
div id="content"> <img src="img/logo.png"> <ul id="navlang"> <li><a href="#" id="en">english</a></li> <li><a href="#" id="es">español</a></li> </ul> <div id="naveng"> <ul > <li><a href="#">beauty</a></li> <li><a href="#">campaign</a></li> <li><a href="#">editorial</a></li> <li><a href="#">biography</a></li> <li><a href="#">contact</a></li> </ul> </div> <div id="naves"> <ul> <li><a href="#">belleza</a></li> <li><a href="#">campañas</a></li> <li><a href="#">editorial</a></li> <li><a href="#">biografía</a></li> <li><a href="#">contacto</a></li> </ul> </div> </div>
and script
$( document ).ready(function() { $("#naveng").hide(); $("#naves").hide(); $("#en").click(function(){ $("#navlang").fadeout("slow"); $("naveng").fadein("slow"); }); $("#es").click(function(){ $("#navlang").fadeout("slow"); $("naves").fadein("slow"); }); });
the fade out effect works well, can't make second nav fade in, i've tried using display:none; before id didn't worked neither..
basically, when hide navs using display:none; cant make them fade in , when use .hide() wont hide.
if you're trying select elements id need include #
in selectors, is, $("#naveng")
instead of $("naveng")
(and forth):
$( document ).ready(function() { $("#naveng").hide(); $("#naves").hide(); $("#en").click(function(){ $("#navlang").fadeout("slow"); $("#naveng").fadein("slow"); }); $("#es").click(function(){ $("#navlang").fadeout("slow"); $("#naves").fadein("slow"); }); });
edit: note javasript case sensitive, should "slow"
lowercase "s", not "slow"
(.fadein()
default 400ms if pass string doesn't recognise). , more pleasing effect if didn't start fade in until fade out finished:
$("#navlang").fadeout("slow", function() { $("#naveng").fadein("slow"); });
Comments
Post a Comment