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事件中的mouseenter循环应该在mouseleave中。我还在featspos事件开始时将mouseleave重置为零，并添加stop()以中断动画，如果用户在完成动画之前将其移出。

最后，重置图像被移动到一个功能，以消除一些冗余代码。

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

});

JQuery横向手风琴横幅绝对定位错误

1 个答案: