Question

我有这一行缩略图，我用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>

Answer 1

我只是在顶级名单上工作，但我认为我已经完成了所有工作。如果您正在寻找它，请告诉我。

以下是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;
});

Answer 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/

Answer 3

Hover将mouseEnter（）和mouseLeave（）绑定到对象。我认为在这种情况下你会有更好的运气与mouseOver（），虽然我没有尝试过。

What is the difference between the mouseover and mouseenter events?

使用jQuery动画时丢失悬停（不移动鼠标）

3 个答案: