javascript - 图像 slider 中的最后一个图像在 mouseenter 上跳跃

Question

我构建了一个图像 slider ，在该特定图像的 mouseenter 上显示 2 个部分图像和 1 个完整图像。它工作正常，直到我将最后一张图像设置为全宽(使用 css)作为默认图像(这样当用户打开页面时，这 1 张图像将完全显示)。

我使用了 if 语句，因此当其他图像悬停在上方时，默认图像的宽度会减小。但是，只要将鼠标悬停在任何图像(包括默认图像)上，最后一个图像会在另一个图像展开之前立即缩小其宽度。这会在 slider 的右侧创建一个临时间隙。我试过更改动画时间并使用其他方法，如 jQuery 的 css() 方法，但没有成功。

同样的问题也发生在 mouseleave 上，当它仅离开最后一个“默认”图像的包含 slider 时。

任何人都知道如何克服这个错误以使动画流畅运行？

HTML

<div id='imgSlider'>
    <ul>
        <li><img src='images/Girl-skyscraper.jpg' height='300' width='300' /></li>
        <li><img src='images/cities-skies.jpg' height='300' width='300'/></li>
        <li><img src='images/windows.jpg' height='300' width='300' /></li>
    </ul>
</div>

CSS

div#imgSlider {
    height:300px;
    width:600px;
    border:1px solid #2367d3;
}

div#imgSlider ul li {
    float:left;
    width:150px;
    overflow: hidden;
}

div#imgSlider ul li:last-child {
    width:300px;
}

JavaScript

$('div#imgSlider ul li').on({
    mouseenter: function(){
        if($(this) != $('div#imgSlider ul li:last')) {
            $('div#imgSlider ul li:last').animate({
                width: '150'
            },0);
        } 
        $(this).animate({width:'300'},400);
    },
    mouseleave: function(){
        $(this).animate({width:'150'},400);
    }
});

$('div#imgSlider').on('mouseleave',function(){
    $('div#imgSlider ul li:last').animate({
        width:'300'
    },400);
});

jsfiddle:http://jsfiddle.net/XwL2G/

Answer 1

不同的做事方式，使用相同的 html。

CSS

#imgSlider{
     position:relative;
     overflow:hidden;
}

ul{position:relative;}

li{float:left;}

使用 javascript 左右移动你的 ul。添加一些逻辑，以便当您滚动到末尾时它循环回到开头或防止 left 比上一张幻灯片的位置更高。