Complete Nub делает JQuery пользовательский баннер с Fade FX.беги, если твоя жизнь тебе дорога

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> вместо <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");
});

Для всех остальных вопросов это потому, что 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 классы, если они не нужны для чего-то другого.