在使用jQuery进行动画时丢失悬停（不移动鼠标） [英] Losing hover when animating with jQuery (without moving mouse)

问题描述

我有这一行缩略图，我正在使用jQuery进行动画处理。

这些缩略图中的每一个都有一个悬停和活动类。

它们工作正常，但是当我为列表设置动画时，mousecursor下的新缩略图不适用悬停？每次点击后我必须移动一下鼠标吗？

有点难以对开......我在这里做了一个小提琴： http://jsfiddle.net/nZGYA/

当您在不移动鼠标的情况下开始点击拇指3后，您会看到我的意思是......

它在FireFox，非Safari，Chrome，IE等中工作正常。

有什么我可以做的

$ b

< style 类型= 文本/ CSS >
.container {position：relative;溢出：隐藏;宽度：140px; height：460px;向左飘浮; margin-right：100px;背景：银色; }
ul {position：absolute;前10名; list-style：none; margin：10px;填充：0; }
li {margin-bottom：10px; width：120px; height：80px;背景：灰色; }
＃list-2 li a {display：block; width：120px; height：80px;概要：无; }
＃list-2 li a：hover {background：teal; }
＃list-2 li a.active {background：navy; }
< / style>
$ b $（document）.ready（function（）{
var 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'}）;
return false;
}）
.each（function（）{
$（this）.data（'index'，idx_2）;
++ idx_2;
}）;
}）;

< div class =container>
< ul id =list-2>
< li>< a class =activehref =＃>< / a>< / li>
lt< a href =＃>< / a>< / li>< / gt;< a href =＃>< / a>< < / li>< li>< a href =＃>< / a>< / li>< li>< a href =＃>< / a>< / li>
lt< a href =＃>< / a>< / li>< / gt;< a href =＃>< / a>< < / li>< li>< a href =＃>< / a>< / li>< li>< a href =＃>< / a>< / li>
lt< a href =＃>< / a>< / li>< / gt;< a href =＃>< / a>< < / li>< li>< a href =＃>< / a>< / li>< li>< a href =＃>< / a>< / li>
lt< a href =＃>< / a>< / li>< / gt;< a href =＃>< / a>< < / li>< li>< a href =＃>< / a>< / li>< li>< a href =＃>< / a>< / li>
lt< a href =＃>< / a>< / li>< / gt;< a href =＃>< / a>< < / li>< li>< a href =＃>< / a>< / li>< li>< a href =＃>< / a>< / li>
lt< a href =＃>< / a>< / li>< / gt;< a href =＃>< / a>< < / li>< li>< a href =＃>< / a>< / li>< li>< a href =＃>< / a>< / li>
< / ul>
< / div>


解决方案

这一切工作。让我知道，如果它是你在找什么。

这是 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从索引1开始
 if（currentindex === 1&& selectedindex> 2）{
 nexthoverindex = nexthoverindex  -  1; 
} 
 
 // （currentindex === 0&& selectedindex> 2）{
 nexthoverindex = nexthoverindex  -  2; 
} 
 
 //确保选择永远不会低于0 
 if（nexthoverindex <0）{
 nexthoverindex = 0; 
} 
 
 $（'＃list-1 > li'）。removeClass（'active'）; 
 $（this）.addClass（'active'）; 
 var id = $（'＃list-1 li.active'）。data （'index'） -  2; //以滚动参数为参数d减2以保持所选图像在中间
 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'）; 
} 
}）; 
返回false; （）函数（）{
 $（this）.data（'index'，idx）; 
 ++ idx; 
}）。css（'cursor'，'pointer'）。 
}）; 
  

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;
});

这篇关于在使用jQuery进行动画时丢失悬停（不移动鼠标）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！