0

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

});​
4

4 回答 4

1

您可以从中获得参考：http ://snook.ca/archives/javascript/jquery-bg-image-animations

于 2012-05-21T22:03:35.867 回答
1

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

于 2012-05-21T22:06:51.187 回答
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>​

请注意，背景位置属性是 x 和 y 版本的组合。您不能为复合属性设置动画，您需要分别为 X 和 Y 版本设置动画。或者，您可以使用一个 css 钩子插件，使其成为可能。你可以在这里找到：https ://github.com/brandonaaron/jquery-cssHooks

于 2012-05-21T22:10:09.253 回答
0

如果您将有很多列表项，您可能需要考虑将事件委托给 #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);       
});
于 2012-05-21T22:16:26.120 回答