Советов о том, как оживить фон элемента списка

Question

я задавался вопрос, если вы можете предложить мне лучший способ достижения эффекта Ive, созданный в этой скрипке: 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://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 версию отдельно. Кроме того, вы можете использовать плагин css hook, который позволяет. Вы можете найти их здесь: https://github.com/brandonaaron/jquery-cssHooks

Answer 2

Вы можете получить Referance от этого: http://snook.ca/archives/javascript/jquery-bg-image-animations

Answer 3

Могу ли я предложить средство CSS3 только достичь того, что я думаю вы» re пытающийся сделать:

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 4

Если у вас будет много элементов списка, вы можете рассмотреть делегирование событий в элементе #test, поэтому вам не нужно прикладывать кучу разных прослушивателей событий к каждому li tag

//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);  
});