使用 jQuery 制作动画时失去悬停(不移动鼠标)
Posted
技术标签:
【中文标题】使用 jQuery 制作动画时失去悬停(不移动鼠标)【英文标题】:Losing hover when animating with jQuery (without moving mouse) 【发布时间】:2011-06-22 23:18:33 【问题描述】:我有这行缩略图,我正在使用 jQuery 制作动画。 这些缩略图中的每一个都有一个悬停和活动类。
它们工作正常,但是当我为列表设置动画时,鼠标光标下的新缩略图不会应用悬停?每次点击后都要移动鼠标一点吗?
这有点难以解释.. 我在这里做了一个小提琴:http://jsfiddle.net/nZGYA/ 当您在拇指 3 之后开始单击而不移动鼠标时,您会明白我的意思...
它在 FireFox,不是 Safari,Chrome,IE 等中运行良好。 对此我能做些什么吗?
这里是我的代码供参考:
<style type="text/css">
.container position: relative; overflow: hidden; width: 140px; height: 460px; float: left; margin-right: 100px; background: silver;
ul position: absolute; top: 10; list-style: none; margin: 10px; padding: 0;
li margin-bottom: 10px; width: 120px; height: 80px; background: gray;
#list-2 li a display: block; width: 120px; height: 80px; outline: none;
#list-2 li a:hover background: teal;
#list-2 li a.active background: navy;
</style>
$(document).ready(function()
var idx_2 = 0;
$('#list-2 li a')
.click(function()
$('#list-2 > li a').removeClass('active');
$(this).addClass('active');
var id = $('#list-2 li a.active').data('index') - 2;
idy = Math.max(0, id * 90);
$(this).parent().parent().animate( 'top' : -idy + 'px' );
return false;
)
.each(function()
$(this).data('index', idx_2);
++idx_2;
);
);
<div class="container">
<ul id="list-2">
<li><a class="active" href="#"></a></li>
<li><a href="#"></a></li><li><a href="#"></a></li><li><a href="#"></a></li><li><a href="#"></a></li>
<li><a href="#"></a></li><li><a href="#"></a></li><li><a href="#"></a></li><li><a href="#"></a></li>
<li><a href="#"></a></li><li><a href="#"></a></li><li><a href="#"></a></li><li><a href="#"></a></li>
<li><a href="#"></a></li><li><a href="#"></a></li><li><a href="#"></a></li><li><a href="#"></a></li>
<li><a href="#"></a></li><li><a href="#"></a></li><li><a href="#"></a></li><li><a href="#"></a></li>
<li><a href="#"></a></li><li><a href="#"></a></li><li><a href="#"></a></li><li><a href="#"></a></li>
</ul>
</div>
【问题讨论】:
我也有同样的问题。我有移动的对象,我希望能够检测到悬停...即使鼠标不移动但对象移动到它下方。 【参考方案1】:我只在***列表中工作,但我认为我已经完成了所有工作。让我知道它是否是您正在寻找的。p>
这里是fiddler
var idx = 0;
$('#list-1 li').hover(function()
$(this).addClass('hover');
, function()
$(this).removeClass('hover');
).click
(function()
var currentindex = $('.active').index();
var selectedindex = $(this).index();
var nexthoverindex = selectedindex + (selectedindex - currentindex);
//counter for starting on index 1
if(currentindex === 1 && selectedindex > 2)
nexthoverindex = nexthoverindex - 1;
//counter for starting on index 0
if(currentindex === 0 && selectedindex > 2)
nexthoverindex = nexthoverindex - 2;
//make sure the selection never goes below 0
if(nexthoverindex < 0)
nexthoverindex = 0;
$('#list-1 > li').removeClass('active');
$(this).addClass('active');
var id = $('#list-1 li.active').data('index') - 2; // take scroll param and subtract 2 to keep selected image in the middle
idy = Math.max(0, id * 90);
$(this).parent().animate(
'top': -idy + 'px'
,200, function()
$('.hover').removeClass('hover');
if(currentindex > 2 || selectedindex > 2)
$('#list-1 > li').eq(nexthoverindex).addClass('hover');
);
return false;
).css('cursor', 'pointer').each(function()
$(this).data('index', idx);
++idx;
);
【讨论】:
【参考方案2】:我有一个适用于 Chrome 和 IE 的解决方案(尚未在 Safari 中测试)。基本上,如果缩略图移动了,我会在 animate() 回调事件中触发鼠标下元素的 mouseover() 事件。该解决方案仅针对 list-1 实施。
// list 1
var idx = 0;
$('#list-1 li').hover(function()
$(this).addClass('hover');
, function()
$(this).removeClass('hover');
).click(function()
$('#list-1 > li').removeClass('active');
var $active = $(this);
$active.addClass('active');
var id = $('#list-1 li.active').data('index') - 2; // take scroll param and subtract 2 to keep selected image in the middle
var moveAmount = 90;
idy = Math.max(0, id * moveAmount);
var oldPos = $active.parent().position().top;
$active.parent().animate(
'top': -idy + 'px'
, function()
var newPos = $(this).position().top;
// Check if we moved
if(oldPos - newPos != 0)
var movement = (oldPos - newPos) / moveAmount;
$($(this).children()[$active.index() + movement])
.trigger("mouseover");
);
return false;
).css('cursor', 'pointer').each(function()
$(this).data('index', idx);
++idx;
);
如果你不想在那里测试的话,这里是我在 jsfiddle 中的 fork 的链接 - http://jsfiddle.net/jimmysv/3tzAt/15/
【讨论】:
太棒了!它也适用于 Safari :-) 非常感谢您的工作。现在我只是希望在 jcarousel 中实现起来并不困难。因为我的例子只是基本的想法。干杯吉米! 嗯,我发现了一个错误。单击 +2 或 -2 拇指时,悬停不正确。哦,好吧,谢谢你的想法。 是的,我在几个小时前修复了这个问题,但没有注意到 jsFiddle 更改了链接。我现在已经用正确版本的链接更新了我的答案。 如果您在动画结束之前单击并将鼠标移出框,这仍然是一个小问题。也许一个简单的前后鼠标定位检查相对于窗口可以解决这个问题? 这听起来像是一个可能的解决方案。真的不知道我还能怎么做。以上是关于使用 jQuery 制作动画时失去悬停(不移动鼠标)的主要内容,如果未能解决你的问题,请参考以下文章
使用jQuery动画远离光标时,停止“:悬停”元素保持其状态?