我做投资组合已经有一段时间了。我需要很长时间才能掌握完成它所需的技能,但在我想出一些技巧后,我会回去做一点。
现在,我刚刚完成了移动导航。它按照我希望的方式工作,但所涉及的jQuery代码有点长。
以下是相关的HTML:
<header class="mobile-header">
<span>Menu</span>
<img src="img/nav-icon.png" id="pull">
</header>
<ul class="mobile-navigation">
<li>
<span class="ornament-left ornament1">N</span>
<a href="#" class="navLink1">Home</a>
<span class="ornament-right ornament1">N</span>
</li>
<li>
<span class="ornament-left ornament2">N</span>
<a href="#" class="navLink2">About</a>
<span class="ornament-right ornament2">N</span>
</li>
<li>
<span class="ornament-left ornament3">N</span>
<a href="#" class="navLink3">Work</a>
<span class="ornament-right ornament3">N</span>
</li>
<li>
<span class="ornament-left ornament4">N</span>
<a href="#" class="navLink4">Contact</a>
<span class="ornament-right ornament4">N</span>
</li>
</ul>
注意:之所以到处都是随机的N,是因为我下载了一个装饰字体,而N是我想要的装饰。
相关jQuery:
$(function(){
var navLink1 = $('.navLink1')
navLink2 = $('.navLink2')
navLink3 = $('.navLink3')
navLink4 = $('.navLink4')
ornament1 = $('.ornament1')
ornament2 = $('.ornament2')
ornament3 = $('.ornament3')
ornament4 = $('.ornament4')
$(navLink1).hover(
function() {
ornament1.fadeTo('med', 1.0);
}, function() {
ornament1.fadeTo('med', 0);
}
);
$(navLink2).hover(
function() {
ornament2.fadeTo('med', 1.0);
}, function() {
ornament2.fadeTo('med', 0);
}
);
$(navLink3).hover(
function() {
ornament3.fadeTo('med', 1.0);
}, function() {
ornament3.fadeTo('med', 0);
}
);
$(navLink4).hover(
function() {
ornament4.fadeTo('med', 1.0);
}, function() {
ornament4.fadeTo('med', 0);
}
);
})
正如您所知,jQuery占用了大量空间。我想有一些方法可以使用计数器来提高效率,但我想不通。
对于我的网站的实时演示,请看一下这个jsFiddle。
http://jsfiddle.net/n3wyde0h/
这有点粗糙,因为它通常是一个下拉菜单,在单击JSfiddle中不存在的菜单图标后会向下滑动,但你已经明白了。此外,N当然是装饰品。
如何用更少的代码获得相同的结果?
您可以将所有事件合并为一个事件。例如这个HTML:
<ul class="mobile-navigation">
<li>
<span class="ornament-left ornament">N</span>
<a href="#" class="navLink">Home</a>
<span class="ornament-right ornament">N</span>
</li>
<li>
<span class="ornament-left ornament">N</span>
<a href="#" class="navLink">About</a>
<span class="ornament-right ornament">N</span>
</li>
<li>
<span class="ornament-left ornament">N</span>
<a href="#" class="navLink">Work</a>
<span class="ornament-right ornament">N</span>
</li>
<li>
<span class="ornament-left ornament">N</span>
<a href="#" class="navLink">Contact</a>
<span class="ornament-right ornament">N</span>
</li>
</ul>
和Javascript代码:
$(function(){
$('.navLink').hover(function() {
$(this).parents('li:first').find('.ornament').fadeTo('med', 1.0);
}, function() {
$(this).parents('li:first').find('.ornament').fadeTo('med', 0);
});
})
你不需要所有这些变量,也可以删除它。
希望能有所帮助。
谨致问候。
嗨,你可以这样做
$(function(){
$('.navLink1', '.navLink2', '.navLink3', '.navLink4').hover{
// Get current id
var current_id_splitted = $(this).attr('id').split('navLink');
var current_id = current_id_splitted[1];
// Do the ornament
$('.ornament' + current_id)
.fadeTo('med', 1.0)
.fadeTo('med', 0);
}
})
如果你可以通过为4个元素添加navLink类来更新hour HTML,
$(function(){
$('.navLink').hover{
// Get current id
var current_id_splitted = $(this).attr('id').split('navLink');
var current_id = current_id_splitted[1];
// Do the ornament
$('.ornament' + current_id)
.fadeTo('med', 1.0)
.fadeTo('med', 0);
}
})
但这是可选的,
周末愉快
Mario Araque在我看来做得最好。我还将添加停止功能,如:
$('.navLink').hover(
function () {
$(this).closest("li").find('.ornament').stop(true).fadeTo('med', 1.0);
}, function () {
$(this).closest("li").find('.ornament').stop(true).fadeTo('med', 0);
}
);
这将清除淡入淡出队列,悬停效果只出现一次!