nub complète crée une bannière personnalisée jquery avec fade fx. courir pour votre vie

Question

ici est-il: http://www.exhibitiondesign.com/include/jquery/jquery.banner.1.0.html

je dirais im presque, le vacillement est la question principale - et je sais que le problème est le fane sont déclenchées à chaque fois que des liens sont plané on/off . Je ne sais pas comment implémenter un contrôle de visibilité, ou une autre façon de créer le même effet. J'ai aussi une logique imparfaite sur les services: design> content hovering, 'design' devrait rester pour les deux services enfants. à la fin de tout cela, je veux encapsuler le tout en .js, le code html aussi avec document.write. n'importe quelle aide serait appréciée, je ne suis aucun codeur, et js que j'ai regardé seulement pendant quelques semaines ainsi j'aurais besoin des termes de lamens. voici les css, html et js pertinents:

#banner{width:100%; height:40px; background:#000;} 
    #banner ul{width:1024px; margin:auto; padding:0; list-style:none;} 
    #banner ul li{height:16px; margin:10px 40px 0 0; float:left;} 
    #banner ul li a{font-size:9pt; color:#FFF; text-decoration:none;} 
    .line1a,.line1b,.line1c,.line1d,.line1e,.line1f{display:none;} 
    .line2a,.line2b,.line2c,.line2d,.line2e,.line2f{display:none;} 
    .companyname{font-size:16pt; color:#FFF; width:220px; margin:7px 0; float:right;} 


<div id="banner"> 
    <ul> 
    <li class="line1a"> 
    <a href="/home/home.html">HOME</a> 
    </li> 
    <li class="line1b"> 
    <a href="/profile/profile.html">PROFILE</a> 
    <div class="line2b"> 
    <a href="/press/press.html">PRESS</a> 
    </div> 
    </li> 
    <li class="line1c"> 
    <a href="/client_directory/client_directory.html">CLIENT DIRECTORY</a> 
    <div class="line2c"> 
    <a href="/testimonials/testimonials.html">TESTIMONIALS</a> 
    </div> 
    </li> 
    <li class="line1d"> 
    <a href="/projects/projects.html">PROJECTS</a> 
    </li> 
    <li class="line1e" style="width:60px;"> 
    <a href="/services/design.html" class="swap" style="cursor:pointer;">SERVICES</a> 
    <div class="line2e"> 
    <a href="/services/content.html">CONTENT</a> 
    </div> 
    </li> 
    <li class="line1f" style="width:60px;"> 
    <a href="/contact/contact.html">CONTACT</a> 
    <div class="line2f"> 
    <a href="/recruitment/recruitment.html">RECRUITMENT</a> 
    </div> 
    </li> 
    <div class="companyname"> 
    MORRIS ASSOCIATES 
    </div> 
    </ul> 
</div> 




    $(document).ready(function(){ 

//remove outline from links 
$("a").click(function(){ 
    $(this).blur(); 
}); 

//swap services text 
$(".swap").mouseover(function(){ 
    $(this).text("DESIGN"); 
}); 
$(".swap").mouseout(function(){ 
    $(this).text("SERVICES"); 
}); 

//when mouse is on banner 
$("#banner").mouseover(function(){ 
    $("#banner").stop(true, false).animate({height:'50px'},{queue:false, duration:200, easing: 'easeInQuad'}); 
    $(".line1a").stop(true, true).fadeIn(400) 
    $(".line1b").stop(true, true).fadeIn(400) 
    $(".line1c").stop(true, true).fadeIn(400) 
    $(".line1d").stop(true, true).fadeIn(400) 
    $(".line1e").stop(true, true).fadeIn(400) 
    $(".line1f").stop(true, true).fadeIn(400) 
}); 

//when mouse is off banner 
$("#banner").mouseout(function(){ 
    $("#banner").stop(true, true).animate({height:'40px'},{queue:false, duration:200, easing: 'easeInQuad'}); 
    $(".line1a").stop(true, true).fadeOut(400) 
    $(".line1b").stop(true, true).fadeOut(400) 
    $(".line1c").stop(true, true).fadeOut(400) 
    $(".line1d").stop(true, true).fadeOut(400) 
    $(".line1e").stop(true, true).fadeOut(400) 
    $(".line1f").stop(true, true).fadeOut(400) 
}); 

//when mouse is on line1 
$(".line1a").mouseover(function(){ 
    $(".line2a").stop(true, true).fadeIn(400) 
}); 
$(".line1b").mouseover(function(){ 
    $(".line2b").stop(true, true).fadeIn(400) 
}); 
$(".line1c").mouseover(function(){ 
    $(".line2c").stop(true, true).fadeIn(400) 
}); 
$(".line1d").mouseover(function(){ 
    $(".line2d").stop(true, true).fadeIn(400) 
}); 
$(".line1e").mouseover(function(){ 
    $(".line2e").stop(true, true).fadeIn(400) 
}); 
$(".line1f").mouseover(function(){ 
    $(".line2f").stop(true, true).fadeIn(400) 
}); 

//when mouse is off line1 
$(".line1a").mouseout(function(){ 
    $(".line2a").stop(true, true).fadeOut(400) 
}); 
$(".line1b").mouseout(function(){ 
    $(".line2b").stop(true, true).fadeOut(400) 
}); 
$(".line1c").mouseout(function(){ 
    $(".line2c").stop(true, true).fadeOut(400) 
}); 
$(".line1d").mouseout(function(){ 
    $(".line2d").stop(true, true).fadeOut(400) 
}); 
$(".line1e").mouseout(function(){ 
    $(".line2e").stop(true, true).fadeOut(400) 
}); 
$(".line1f").mouseout(function(){ 
    $(".line2f").stop(true, true).fadeOut(400) 
}); 

}); 

Answer 1

Prenons étape par étape, d'abord le problème d'échange. Si vous voulez que le texte reste en vol stationnaire enfants aussi, le mettre sur le parent <li> au lieu du <a>, comme ceci:

<li class="line1e swap" style="width:60px;"> 
<a href="/services/design.html" style="cursor:pointer;">SERVICES</a> 
<div class="line2e"> 
    <a href="/services/content.html">CONTENT</a> 
</div> 
</li> 

Puis jQuery plane au de match, comme celui-ci:

$(".swap").hover(function(){ 
    $(this).children("a").text("DESIGN"); 
}, function(){ 
    $(this).children("a").text("SERVICES"); 
}); 

Pour tous les autres problèmes, c'est parce mouseover et mouseout feu lors de l'entrée des enfants, vous voyez l'effet secondaire le plus commun, scintillant avec des animations. Au lieu de cela, utilisez mouseenter et mouseleave ... ou le raccourci, .hover(), comme ceci:

$("#banner").hover(function(){ 
    $("#banner").stop(true, false).animate({height:'50px'},{queue:false, duration:200, easing: 'easeInQuad'}); 
    $(this).find("> ul > li").stop(true, true).fadeIn(); 
}, function(){ 
    $("#banner").stop(true, true).animate({height:'40px'},{queue:false, duration:200, easing: 'easeInQuad'}); 
    $(this).find("> ul > li").stop(true, true).fadeOut(); 
}); 

$("#banner > ul > li").hover(function() { 
    $(this).children("div").fadeIn(); 
}, function() { 
    $(this).children("div").fadeOut(); 
}); 

You can test the result out here. Notez également que grâce à l'utilisation de selectorsrelative to this, vous pouvez éviter tout ce code dupliqué et réduire vos gestionnaires. Vous pouvez également supprimer toutes ces classes .lineXX sauf si elles sont nécessaires pour autre chose.