Làm cách nào để tạo hình động trượt trên menu di chuột với jQuery?

Question

Tôi đã nhìn thấy điều này trên nhiều trang web nhưng tôi không chắc chắn liệu tôi có thể giải thích nó hay không.

Đôi khi có trượt yếu tố trong việc điều khiển, giống như mũi tên dưới mục menu được trượt khi dùng di chuột qua đường dẫn menu khác nhau vv

Dưới đây là một menu đơn giản:

<ul> 
    <li><a href="#">Link 1</a></li> 
    <li><a href="#">Link number 2</a></li> 
    <li><a href="#">Link 3</a></li> 
    <li><a href="#">Link something 4</a></li> 
    <li><a href="#">Link 5</a></li> 
</ul> 

Và một số jQuery (tôi biết tôi sẽ có thể để có được những tác dụng tương tự với css đơn giản: di chuột):

jQuery('ul li a').hover(function() { 
    jQuery('a').removeClass('active'); 
    jQuery(this).addClass('active'); 
}); 

Ngoài ra, jsfiddle làm việc:

http://jsfiddle.net/8EvhK/

Nền nút trở nên đỏ khi di chuột. Tôi muốn nền này trượt và chuyển đổi (chiều rộng) giữa các nút này khi tôi di chuột.

Làm thế nào để làm điều gì đó như vậy? Tôi đã tìm kiếm hướng dẫn, nhưng không có may mắn.

Cảm ơn rất nhiều!

Answer 1

1. Thêm phần tử vào menu bằng cách sử dụng jquery's append.

   $('ul').append('<div id="slider"></div>'); 
   

2. On hover của bất kỳ mục trình đơn, animate yếu tố mới này đến ngang position và width của menu item mà bắn sự kiện này.

   $('ul li a').hover(function(){ 
   
       var left = $(this).parent().position().left; 
       var width = $(this).width(); 
   
       $('#slider').stop().animate({ 
        'left' : left, 
        'width' : width 
       }); 
   }); 
   

3. Đặt lại thanh trượt về trạng thái ban đầu.

   var left = $('ul li:first-child a').parent().position().left; 
   var width = $('ul li:first-child a').width(); 
   $('#slider').css({'left' : left, 'width' : width}); 
   

4. Thêm một số CSS.

   #slider { 
       position:absolute; 
       top: -5px; 
       left: 0; 
       height: 100%; 
       width: 0; 
       padding: 5px 15px; 
       background-color: #f00; 
       z-index:-1; 
   } 
   

Đây là một fiddle làm việc: http://jsfiddle.net/5wPQa/2/

Answer 2

Bạn có thể đạt được hiệu ứng này với CSS transitions:

ul li { 
    display:block; 
    padding: 5px 15px; 
    background-color: #333; 
    color: #fff; 
    text-decoration: none; 
    width:50%; 
    -moz-transition: width 1s; /* Firefox 4 */ 
    -webkit-transition: width 1s; /* Safari and Chrome */ 
    -o-transition: width 1s; /* Opera */ 
} 

ul li:hover{ 
    width:100%; 
} 

Here is an example.