jquery - JQuery水平手风琴横幅绝对定位错误

Question

以下代码运行基于 JQuery 的水平动画系统。

$(document).ready(function(){
    maxWidth = 700;
    minWidth = 65;
    normWidth = 192;

    var featspos = 0;   

    $('.featuredslider a').each(function(){
        $(this).css('left', featspos+'px');
        featspos += 192; 
    });

     $(".featuredslider a").mouseenter(function(){
         var featscur = $(this).index();
         $('.featuredslider a').each(function(){
            featspos = 0;
            $(this).animate({left: featspos},800);
            if($(this).index() == featscur){ featspos += 700 } else { featspos += 65; };
         });
     });
     $(".featuredslider a").mouseleave(function(){
        $(this).css('left', featspos+'px');
        featspos += 192; 
     });
});

存在绝对定位问题，因为一旦鼠标进入任何一张图片，它们都会向左移动：0px；此外，让他们再次回来的功能也将不起作用。他们只是在 0px 处坐在那里；

我已经设置了一个参考 FIDDLE，所以我希望这有助于解决问题。 http://jsfiddle.net/FzaxF/1/

Answer 1

我做了一些更改：http: //jsfiddle.net/mblase75/FzaxF/6/

当它应该在时，你在事件中有一个.each循环。我还在事件开始时将其重置为零，并添加了一个以在用户在动画完成之前将鼠标移出时中断动画。mouseentermouseleavefeatsposmouseleavestop()

最后，重置图像被转移到一个函数中，以消除一些冗余代码。

$(document).ready(function() {
    maxWidth = 700;
    minWidth = 65;
    normWidth = 192;

    function resetter() {
        var featspos = 0;
        $('.featuredslider a').each(function() {
            $(this).stop().css('left', featspos + 'px');
            featspos += 192;
        });
    }
    resetter();

    $(".featuredslider a").mouseenter(function() {
        var featscur = $(this).index();
        featspos = 0;
        $(this).animate({
            left: featspos
        }, 800);
        if ($(this).index() == featscur) {
            featspos += 700
        } else {
            featspos += 65;
        };
    });
    $(".featuredslider a").mouseleave(function() {
        resetter();
    });

});