ここに問題が表示されるリンクがあります
http://porotoestudio.com/a/ana/nmd/espiritu.html
私がやろうとしているのは、ナビゲーションバーを作成することです。すべての要素をアニメーション化する必要があります。ポーブレムは背景にあり、slideDivBはshow_hideBの後ろにあり、アニメーションは機能しますが、問題は、移動しようとするとバーの周りと要素の上で、SlidingDivBは狂ったように表示および非表示になり始めます。要素をナビゲートしている間、静止して表示する必要があります。
これはhtmlコードです
<html>
<!--Comienza Botonera-->
<div id="botonera" class="escondido">
<div id="activa-botonera" class="show_hideB"></div>
<div id="fondo-botonera" class="slidingDivB"></div>
<div id="botonera_nivel1" class="typeface-js" style="font-family:GreyscaleBasic">
<a href="espiritu.html"><p>espíritu</p></a>
<p> </p>
<a href="#" class="show_hideS"><p>soluciones</p></a>
<p> </p>
<a href="#" class="show_hideP"><p>proyectos</p></a>
<p> </p>
<a href="#" class="show_hideE"><p>estructura</p></a>
<p> </p>
<a href="#"><p>con-texto</p></a>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<a href="contactos.html"><p>contactos</p></a>
</div>
<div id="botonera_proyectos" class="slidingDivP">
<div class="typeface-js" style="font-family:GreyscaleBasic">
<a href="proyectos_arq.html">proyectos arquitectónicos</a>
<p> </p>
<a href="proyectos_urb.html">planes y proyectos urbanos</a><br />
<p> </p>
<a href="arquit_pai.html">arquitectura del paisaje</a><br />
<p> </p>
<a href="arquit_int.html">arquitectura interior</a><br />
<p> </p>
<a href="arquit_trans.html">arquitectura del transporte</a><br />
</div>
<div id="proyectos_flecha"class="typeface-js" style="font-family:GreyscaleBasic">></div>
</div>
<div id="botonera_soluciones" class="slidingDivS">
<div class="typeface-js" style="font-family:GreyscaleBasic">
<a href="soluciones_arq.html">proyectos arquitectónicos</a><br />
<p> </p>
<a href="soluciones_urb.html">planes y proyectos urbanos</a><br />
<p> </p>
<a href="soluciones_pai.html">arquitectura del paisaje</a><br />
<p> </p>
<a href="soluciones_int.html">arquitectura interior</a><br />
<p> </p>
<a href="soluciones_trans.html">arquitectura del transporte</a>
<br />
</div>
<div id="soluciones_flecha" class="typeface-js" style="font-family:GreyscaleBasic">></div>
</div>
<div id="botonera_estructura" class="slidingDivE">
<div class="typeface-js" style="font-family:GreyscaleBasic">
<a href="somos-historia.html">somos / historia</a><br />
<p> </p>
<a href="mision-vision.html">misión / visión</a><br />
<p> </p>
<a href="#" class="show_hideQ">equipo</a><br />
<br />
</div>
<div id="estructura_flecha" class="typeface-js" style="font-family:GreyscaleBasic">></div>
</div>
<div id="botonera_equipo" class="slidingDivQ">
<div class="typeface-js" style="font-family:GreyscaleBasic">
<a href="gobierno.html">gobierno NMD</a><br />
<p> </p>
<a href="clientes.html">clientes</a><br />
<p> </p>
<a href="fichas.html">fichas</a><br />
<br />
</div>
<div id="equipo_flecha" class="typeface-js" style="font-family:GreyscaleBasic">></div>
</div>
</div>
<!--Termina Botonera-->
</html>
これもまた、woleナビゲーションバーのスクリプトです
<script type="text/javascript">
$(document).ready(function(){
$(".slidingDivP").hide();
$(".show_hideP").show();
$('.show_hideP').mouseover(function(){
$(".slidingDivP").slideToggle();
$(".slidingDivS").hide();
$(".slidingDivE").hide();
$(".slidingDivQ").hide();
});
});
$(document).ready(function(){
$(".slidingDivS").hide();
$(".show_hideS").show();
$('.show_hideS').mouseover(function(){
$(".slidingDivS").slideToggle();
$(".slidingDivP").hide();
$(".slidingDivE").hide();
$(".slidingDivQ").hide();
});
});
$(document).ready(function(){
$(".slidingDivE").hide();
$(".show_hideE").show();
$('.show_hideE').mouseover(function(){
$(".slidingDivE").slideToggle();
$(".slidingDivP").hide();
$(".slidingDivS").hide();
$(".slidingDivQ").hide();
});
});
$(document).ready(function(){
$(".slidingDivQ").hide();
$(".show_hideQ").show();
$('.show_hideQ').mouseover(function(){
$(".slidingDivQ").slideToggle();
$(".slidingDivP").hide();
$(".slidingDivS").hide();
});
});
$(document).ready(function(){
$(".slidingDivB").hide();
$(".show_hideB").show();
$('.show_hideB').mouseenter(function(){
$(".slidingDivB").slideDown();
});
$('.show_hideB').mouseleave(function(){
$(".slidingDivB").slideUp();
});
</script>