0

これがそれです：http： //www.exhibitiondesign.com/include/jquery/jquery.banner.1.0.html

ほぼそこにいると思いますが、ちらつきが主な問題です。問題は、リンクがオン/オフになっているときにフェードがトリガーされることです。可視性チェック、または同じ効果を作成する別の方法を実装する方法がわかりません。また、サービスにいくつかの欠陥のあるロジックがあります。デザイン>コンテンツのホバリング、「デザイン」は両方のサービスの子に残しておく必要があります。最後に、すべてを.jsにカプセル化し、htmlコードもdocument.writeでカプセル化します。助けていただければ幸いです。私はコーダーではありません。jsは数週間しか見ていないので、ラメン用語が必要です。関連する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)
 });

});
4

1 に答える 1

1

順を追って説明しましょう。まず、スワップの問題です。子もホバリングしたときにテキストを残したい場合は、次のように、<li>の代わりに親に配置します。<a>

<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");
});

他のすべての問題については、children に入るときにmouseover発火mouseoutするため、最も一般的な副作用であるアニメーションがちらつきます。代わりに、次のように and ... またはショートカットを使用します。mouseentermouseleave.hover()

$("#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();
});

ここで結果をテストできます。また、 に関連するセレクター を使用することで、コードの重複をすべて回避し、ハンドラーをスリム化できることにも注意してください。他の何かに必要でない限り、これらのクラスをすべて削除することもできます。this.lineXX

于 2010-12-07T12:14:07.153 に答える