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

background-position プロパティは、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 に答える