0

这是它： http ://www.exhibitiondesign.com/include/jquery/jquery.banner.1.0.html

我想说我快到了，闪烁是主要问题 - 我知道问题是每当链接悬停开/关时都会触发淡入淡出。我只是不知道如何实现可见性检查或创建相同效果的另一种方式。我对服务也有一些有缺陷的逻辑：设计>内容悬停，“设计”应该保留给两个服务子项。最后，我想把整个东西封装成一个.js，html代码也用document.write。任何帮助将不胜感激，我不是编码员，而且我只看了几个星期的 js，所以我需要 lamen 条款。这是相关的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 回答