完全なnubはfade fxでjqueryカスタムバナーを作成しています。ここ

Question

あなたの人生のために実行することは、それは次のようになります。 http://www.exhibitiondesign.com/include/jquery/jquery.banner.1.0.html

私はちらつきが主な問題である、ほぼそこイム言うだろう - と、私は問題はリンクがオン/オフで推移している時はいつでもフェードがトリガされていることを知っています。私はどのように可視性チェックを実装するか、または同じ効果を作り出す別の方法を知っていません。 私はサービスにもいくつかの欠陥のあるロジックを持っています。デザイン>コンテンツのホバリング、両方のサービスの子供にとって「デザイン」は残るべきです。それの最後に 、私は全体を.jsに、HTMLコードもdocument.writeでカプセル化したいと思います。 何か助けていただければ幸いです。私はコーダーではありません.JSは数週間しか見ていないので、私はlamensの言葉が必要です。関連するcss、html、およびjsは次のとおりです。

#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

最初にスワップの問題を取り上げてみましょう。テキストがあまりにも子供たちをホバリングするとき、このように、代わりに<a>の親<li>の上に置いたままにしたい場合：

<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> 

次にjQueryのは、このように、一致させるために置い：については

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

をそれ以外の問題はmouseoverとmouseoutです。子供に入るとと表示され、最も一般的な副作用、アニメーションのちらつきが見られます。

$("#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：代わりに、このように、mouseenterとmouseleave ...やショートカット、.hover()を使用しています。また、selectorsrelative to thisを使用すると、重複したコードをすべて避けて、ハンドラをスリムにすることができます。他の何かのために必要でない限り、すべてのそれらの.lineXXクラスを削除することもできます。