jQuery的動畫（）從右到左的.hover

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

更新的標題說，從右到左，而不是左到右

來源

2012-02-20 user1222186

你嘗試在同一時間作爲動畫的'left'屬性'width'？ – nnnnnn 2012-02-20 23:19:48

你在找這個？

$(".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/

來源

2012-02-20 23:45:20 ShankarSangoli

似乎在jsFiddle中工作，但當我嘗試添加代碼時，它不能在本地工作，我似乎無法找到原因。 – user1222186 2012-02-21 00:41:35

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

$（「更多」）。懸停（函數（）{

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

}，函數（）{

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

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

} ）;

你應該嘗試與我玩CS的一點，我counld't，對不起那個:)）

http://jsfiddle.net/zxJtu/

來源

2012-02-21 00:22:30 riso

jQuery的動畫（）從右到左的.hover

回答

相關問題