有关如何对列表项的背景进行动画处理的建议

Advice about how to animate the background of a list item

本文关键字：动画 处理 背景 列表      更新时间：2023-09-26

我想知道你是否可以为我提供一个更好的方法来实现我在这个小提琴中创建的效果：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);
    });
});​

正如我在评论中提到的，您可以使用背景位置来制作动画。这是一个仅使用背景图像定位的简单方法(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>​

请注意，背景位置属性是 x 和 y 版本的组合。不能对复合属性进行动画处理，需要分别对 X 和 Y 版本进行动画处理。或者，您可以使用 css 钩子插件来实现它。你可以在这里找到这些： https://github.com/brandonaaron/jquery-cssHooks

你可以从这里得到一个参考： http://snook.ca/archives/javascript/jquery-bg-image-animations

我可以建议一种仅限 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小提琴演示。

如果你要有很多列表项，你可能需要考虑对 #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);       
});
相关文章：