Question

我想知道你能不能给我一个更好的方法来实现我在这个小提琴中创造的效果：http://jsfiddle.net/YLuKh/1/

基本上我想设置锚标签的背景颜色，通过在图像顶部的跨度上定位锚标签然后悬停动画宽度的跨度来显示我已经完成的图像。任何人都可以建议更直接的方式吗？

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://snook.ca/archives/javascript/jquery-bg-image-animations

Answer 2

我可以建议一种仅用于CSS3的方法来实现我想要做的：

li {
    border: 1px solid #f90;
    width: 504px; /* width of the image, adjust to taste */
    overflow: hidden;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -o-box-sizing: border-box;
    box-sizing: border-box;
}
li a {
    display: block;
    position: relative;
    width: 100%;
    height: 2em;
    line-height: 2em;
    color: #fff;
    background-color: #000;
    -webkit-transition: width 1s linear;
    -moz-transition: width 1s linear;
    -o-transition: width 1s linear;
    -ms-transition: width 1s linear;
    transition: width 1s linear;
}

li:hover a {
    width: 0;
    -webkit-transition: width 1s linear;
}

li a::after {
    content: url(http://www.ritaxxii.org/wp-content/uploads/Luxury-Bedroom-Furniture-1.jpg);
    position: absolute;
    top: 0;
    right: 0;
    left: 100%;
    bottom: 0;
}

JS Fiddle demo

Answer 3

正如我在评论中提到的，您可以使用背景位置来制作动画。这是一个只使用背景图像定位（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钩子插件来实现它。你可以在这里找到：https://github.com/brandonaaron/jquery-cssHooks

Answer 4

如果您要有很多列表项，您可能需要考虑将事件委托给#test元素，这样就不必为每个li标签附加一堆不同的事件监听器

//attach one event listener for 'mouseover' and one for 'mouseout' on the test element
$('#test').on('mouseover', 'li', function(){
    //'this' is still the li element
    console.log( $(this)); 

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

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

4 个答案: