jQuery的动画（）从右到左的.hover

Question

我在做喜欢宜家的动画下面这个教程：

http://static.buildinternet.com/live-tutorials/interactive-picture/index.html

我遇到的问题是，我想使信息当有人悬停在图像上时，从右向左扩展，而不是从左向右。

这里是上的jsfiddle一个例子： http://jsfiddle.net/NEHZU/1/

这是的jsfiddle的代码：

CSS：

.more{ position:absolute; width:17px; height:17px; background:url('dim.png'); padding:2px; text-align:left; overflow:hidden; } 

.more span{ position:absolute; left:32px; width:160px; padding:0px 0 0 0px; color:#000; font:bold 13px Lucida Grande, Arial, sans-serif; } 

#test{ top:50px; left:213px;} 

HTML：

<div class="more" id="test"> 

      <a href="http://www.google.com"><img src="http://buzport.com/wp-content/uploads/2011/07/land-phone-17x17px.gif"/></a> 
      <span>random text</span> 

     </div>​ 

JavaSc RIPT：

$(".more").hover(function(){ 
       $(this).stop().animate({width: '225px' },200).css({'z-index' : '10'}); 
      }, function() { 
       $(this).stop().animate({width: '17px', height: '17px' }, 200).css({'z-index' : '1'}); 
       });​ 

更新的标题说，从右到左，而不是左到右

Answer 1

你在找这个？

$(".more").hover(function(){ 
    $(this).stop() 
     .animate({ 
      width: '225px', 
      left: $(this).find('span').width() 
     }, 200) 
     .css({ 'z-index' : '10' }); 
    }, function() { 
    $(this).stop() 
     .animate({ 
      width: '17px', 
      left: '213px', 
      height: '17px' 
    }, 200) 
    .css({'z-index' : '1'}); 
});​ 

http://jsfiddle.net/NEHZU/38/

Answer 2

$(".etc").hide(); 

$（ “更多”）。悬停（函数（）{

$(".etc").animate({ 
    "marginLeft": "-=80px" 
}, 200); 
$(".etc").show(); 

}，函数（）{

$(".etc").animate({ 
    "marginLeft": "+=80px" 
}, 200); 

$(".etc").hide(); 

} ）;

你应该尝试与我玩CS的一点，我counld't，对不起那个:)）

http://jsfiddle.net/zxJtu/