완전한 누브가 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

먼저 스왑 문제를 단계별로 살펴 보겠습니다.

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

경우 :

<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를이 같이 일치 놓을 : 당신은 텍스트가 너무 아이들을 유혹 할 때, 남아있는이처럼 <a> 대신 부모 <li>에 넣어하려는 경우 다른 모든 문제는 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(); 
}); 

You can test the result out here합니다. 또한 selectorsrelative to this을 사용하면 중복 코드를 모두 피하고 처리기를 슬림화 할 수 있습니다. 다른 것들을 필요로하지 않는 한 그 모든 .lineXX 클래스를 제거 할 수도 있습니다.