完整的Nub正在制作带有淡出FADE FX的jQuery自定义横幅。为你的生命而奔波
题
就这个: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)
});
});
解决方案
让我们逐步逐步进行掉期问题。如果您希望在徘徊孩子时保留文字,请将其放在父母身上 <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
除非需要其他东西。
不隶属于 StackOverflow