Question

我在想你能不能给我一个更好的方法, 实现我在这个小提琴上产生的效果: http://jsfiddle.net/YLuKh/1/

基本上,我想将锚标记的背景颜色动画,以显示一个图像,我通过在图像上方的宽度上方放置一个锚标记,然后在盘旋动画上显示宽度。任何人都可以建议更直截了当的方式做到这一点吗?

HTML 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>

联署联合材料联合材料

$(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

正如我在评论中所提到的, 您可以使用背景位置来进行动画。这里简单的一个仅使用背景图像定位( < a href="http://jsfidle. net/3PESX/" rel="no follow" > 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 版本进行静默化动画。或者您可以使用 Cs 钩插件, 使它成为可能。您可以在这里找到 : < a href=" https://github. com/ brandonaronon/jquery- cssHooks" rel=“ nofolp" >https://github. com/brandoenaron/jquery- csHooks

Answer 2

您可以从以下网站获得参考:http://snook.ca/archives/javacript/jquery-bg-image-animations

Answer 3

我可以建议一种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 Didle demo 。

Answer 4

如果您要拥有很多列表项目, 您可能需要考虑将事件授权到 # test 元素的 # 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);       
});

友情链接