javascript - 有关如何为列表项的背景设置动画的建议

Question

我想知道你是否可以为我提供一种更好的方法来实现我在这个 fiddle 中创建的效果:http://jsfiddle.net/YLuKh/1/

基本上，我想对 anchor 标记的背景颜色进行动画处理，以显示图像，这是通过将 anchor 标记放置在图像顶部的跨度上，然后在悬停时对跨度的宽度进行动画处理来完成的。谁能建议一种更直接的方法来做到这一点？

HTML

<ul id="test">
    <li>
        <a href="">This is the link</a>
        <span class="bg"></span>
        <img src="http://www.ritaxxii.org/wp-content/uploads/Luxury-Bedroom-Furniture-1.jpg" />
</li>
</ul>​

JS

$(document).ready(function() {

    var li_width = $('#test').find('li').width();
    console.log(li_width);


    $('#test').find('li').on('mouseover', function() {
        $(this).find('.bg').stop().animate({
            width: '0'
        }, 200);
    }).on('mouseout', function() {
        $(this).find('.bg').stop().animate({
            width: li_width
        }, 200);
    });

});​

Answer 1

正如我在评论中提到的，您可以使用背景位置来制作动画。这是一个仅使用背景图像定位的简单方法 ( http://jsfiddle.net/3PESX/ )

$('a').mouseenter(function() {
    $(this).stop().animate({ 'background-position-x': '-700px'}, 300);
});
$('a').mouseleave(function() {
    $(this).stop().animate({ 'background-position-x': '0'}, 300);
});​

a {
    display: inline-block;
    height: 50px;
    width: 300px; 
    background: transparent url(http://jtrujillo.net/digital-photo-tutorials/8vs16bit/dgr1.jpg) 0 top no-repeat;
    color: grey;
    text-decoration: none;
    line-height: 50px;
}​

<a href="/">This is a link text</a>​

请注意，background-position 属性是 x 和 y 版本的组合。您无法为复合属性设置动画，您需要分别为 X 和 Y 版本设置动画。或者，您可以使用 css hook 插件来实现这一点。您可以在这里找到这些:https://github.com/brandonaaron/jquery-cssHooks