Complete nub 正在使用 fade fx 制作 jquery 自定义横幅。为你的生命奔跑

Question

这是它： 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)
 });

});

Answer 1

让我们一步一步来，首先是交换问题。如果您希望在悬停子级时也保留文本，请将其放在父级

上而不是 上，如下所示：

<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进入子级时触发，您'我们看到了最常见的副作用，动画闪烁。相反，使用 mouseenter 和 mouseleave...或快捷方式，.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 类，除非它们需要用于其他用途。