jQuery的動畫圖像滑出ul列表

Question

我試圖讓一個圖像滑出懸停，然後滑回一旦他們盤旋到一個新的鏈接，但我似乎無法得到它的工作。

這裏的JS

$(function() { 
    $('#menu_seo > li').hover(
    function() { 
     var $this = $(this); 
     $('span',$this).stop().animate({ 
      'right':'70px' 
     }).css({ 
      'zIndex':'10' 
     }); 
    }, 
    function() { 
     var $this = $(this); 
     $('span',$this).stop().animate({ 
      'right':'-10px' 
     }).css({ 
      'zIndex':'-1' 
     }); 
    } 
); 
}); 

和我的CSS：

#menu_seo { 
    position:relative; 
} 

ul#menu_seo li span { 
    height:60px; 
    width:15px; 
    position:absolute; 
    z-index:-1; 
    cursor:pointer; 
} 

ul#menu_seo li span.arrowout1 { 
    background-image:url(../arrow.png); 
    top:8px; 
    left:230px; 
} 

有人在這裏看到我的問題嗎？

Answer 1

首先你不能用z-index做這個動畫，你應該用css overflow:hidden屬性創建一個蒙版區域並用position隱藏動畫對象。

第二件事，你不能動畫一個對象right當該對象的CSS得到left屬性，這將創建一個衝突，將無法正常工作。位置值必須準確。

而我建議你使用jQuery綁定方法，它是堅實的，你可以使用多個事件，例如：click，hover，mouseenter，mouseleave。

這裏是工作的jsfiddle：http://jsfiddle.net/ATPG9/11/

的jQuery：

$('#menu_seo li').bind({ 
    mouseenter: function() { 
     $(this).children('span').stop().animate({'right':'70px'},200); 
    }, 
    mouseleave: function() { 
     $(this).children('span').stop().animate({'right':'-50px'},200); 
    } 
}); 

CSS：

#left_aside { 
    overflow:hidden; 
    float:left; 
    width:230px; 
    height:900px; 
    background-color:#f2dada; 
} 

ul#menu_seo li span { 
    height:50px; 
    width:50px; 
    position:absolute; 
    cursor:pointer; 
    right:-50px; 
}