我在使用 jQuery 的菜单悬停上发现了这个很棒的滑动动画,但我想知道我如何才能做到这一点,以便在第一次悬停时它不会为 left 和 width 属性设置动画,而是立即跳转到悬停的元素。之后,它确实为背景的位置设置了动画。只有再次重新输入时,第一次才会停止动画。
// insert slider
$('ul').append('<div id="slider"></div>');
// initially reset
var left = $('ul li:first-child a').parent().position().left;
var width = $('ul li:first-child a').width();
$('#slider').css({'left' : left, 'width' : width});
// sliding
$('ul li a').hover(function(){
var left = $(this).parent().position().left;
var width = $(this).width();
$('#slider').stop().animate({
'left' : left,
'width' : width
});
});
希望我解释得足够好...
提前致谢!
这是 fiddle :http://jsfiddle.net/5wPQa/2/
最佳答案
我假设您也不希望默认情况下突出显示第一个链接?然后可以删除//initially reset
部分。
让我们将对 ul
元素的引用存储在 $ul
中,因为我们也需要在链接悬停处理程序中访问该元素,而我们不需要不想每次都使用 .parents()
或类似的东西在那里查找它。
让我们马上给 ul
添加一个类,no-animation
。这将用于两件事,一开始隐藏 slider-div(通过样式表),并确定我们是否要在链接悬停时设置动画。
让 slider 立即“跳”到一个位置,而不是动画,可以通过简单地调用 .css()
而不是 .animate()
来完成 -其余代码保持不变,因此我不再重复,而是将要执行的方法的名称存储在变量 method
中。
现在,当链接悬停时,我们首先检查父 ul
是否具有该类 no-animation
。如果是这样,我们删除该类,并将方法设置为 css
而不是 animate
。
$('#slider').stop()[method]()
然后调用 .css()
或 .animate()
,取决于 method
包含的内容。
为了重置效果,我们只需再次添加该类,当 ul
本身不再悬停时。这再次隐藏了 slider-div(由于样式表中的规则),并帮助我们确定这是下次再次“第一次悬停”。
// insert slider
var $ul = $('ul');
$ul.addClass('no-animation').append('<div id="slider"></div>');
$ul.on('mouseleave', function() {
$(this).addClass('no-animation')
});
// sliding
$('ul li a').hover(function() {
var left = $(this).parent().position().left;
var width = $(this).width();
var method = 'animate';
if ($ul.hasClass('no-animation')) {
$ul.removeClass('no-animation');
method = 'css';
}
$('#slider').stop()[method]({
'left': left,
'width': width
});
});
ul {
position: relative;
margin: 50px;
}
ul.no-animation #slider {
display: none;
}
ul li {
display: inline-block;
}
ul li a {
padding: 5px 15px;
border: 1px solid #000;
color: #000;
text-decoration: none;
}
#slider {
position: absolute;
top: -5px;
left: 0;
height: 100%;
width: 0;
padding: 5px 15px;
margin-left: 1px;
background-color: #f00;
z-index: -1;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link number 2</a></li>
<li><a href="#">Link 3</a></li>
<li><a href="#">Link something 4</a></li>
<li><a href="#">Link 5</a></li>
</ul>
关于jquery - 第一次使用这个 "sliding animation on menu hover with jQuery"Fiddle 悬停时如何关闭动画?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56645677/