使用 jQuery 制作动画时失去悬停(不移动鼠标)
我有这行缩略图，我正在使用 jQuery 制作动画.
这些缩略图中的每一个都有一个悬停和活动类.
它们工作正常，但是当我为列表设置动画时，鼠标光标下的新缩略图不会应用悬停?每次点击后都要移动鼠标一点吗?
这有点难以解释.. 我在这里做了一个小提琴:http://jsfiddle.net/nZGYA/
当您在拇指 3 之后开始单击而不移动鼠标时，您会明白我的意思...
它在 FireFox，不是 Safari，Chrome，IE 等中运行良好.
对此我能做些什么吗?
这里是我的代码供参考:
<style type="text/css">.container { 位置:相对；溢出:隐藏；宽度:140px；高度:460px；向左飘浮;右边距:100px；背景:银色；}ul {位置:绝对；前10名;列表样式:无；边距:10px；填充:0；}li { margin-bottom: 10px;宽度:120px；高度:80px；背景:灰色；}#list-2 li a { 显示:块；宽度:120px；高度:80px；大纲:无；}#list-2 li a:hover { 背景:蓝绿色；}#list-2 li a.active { 背景:海军；}</风格>$(文档).ready(函数() {变量 idx_2 = 0;$('#list-2 li a').click(函数(){$('#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' });返回假；}).每个(函数(){$(this).data('index', idx_2);++idx_2;});});<div 类="容器"><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>我只在顶级列表中工作，但我认为我已经完成了所有工作.让我知道它是否是您正在寻找的.
这里是 提琴手
var idx = 0;$('#list-1 li').hover(function() {$(this).addClass('hover');}， 功能() {$(this).removeClass('hover');}).点击(功能() {var currentindex = $('.active').index();var selectedindex = $(this).index();var nexthoverindex = selectedindex + (selectedindex - currentindex);//从索引 1 开始的计数器if(currentindex === 1 && selectedindex > 2){nexthoverindex = nexthoverindex - 1;}//从索引0开始的计数器if(currentindex === 0 && selectedindex > 2){nexthoverindex = nexthoverindex - 2;}//确保选择永远不会低于0if(nextoverindex < 0){nexthoverindex = 0;}$('#list-1 > li').removeClass('active');$(this).addClass('active');var id = $('#list-1 li.active').data('index') - 2;//获取滚动参数并减去 2 以将选定的图像保持在中间idy = Math.max(0, id * 90);$(this).parent().animate({'顶部':-idy + 'px'},200, 函数(){$('.hover').removeClass('hover');如果(当前索引 > 2 || 选定索引 > 2){$('#list-1 > li').eq(nextoverindex).addClass('hover');}});返回假；}).css('cursor', 'pointer').each(function() {$(this).data('index', idx);++idx;});I have this row of thumbnails that I am animating with jQuery.
Each of these thumbnails has a hover and active class.
They work fine but when I animate the list, the new thumbnail under the mousecursor does not apply the hover? I have to move the mouse a little bit after each click?
It's kinda difficult to exaplain.. I have made a fiddle here: http://jsfiddle.net/nZGYA/
When you start clicking after thumb 3 without moving the mouse you see what I mean...
It works fine in FireFox, NOT Safari, Chrome, IE etc.
Is there something I can do about this?
For reference here is my code:
<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>
解决方案
I only worked on the top list but I think I got it all working. let me know if it is what you are looking for.
Here is the 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;
});
相关文章