2012-02-20 5 views
1

나는 IKEA 같은 애니메이션 제작에이 자습서를 수행하고있어 오른쪽에서 왼쪽으로 :의 jQuery 애니메이션() .hover에

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

난 데 문제는 내가 정보를 확인하고 싶다고입니다 누군가가 왼쪽에서 오른쪽으로가 아니라 이미지 위에 놓을 때 오른쪽에서 왼쪽으로 확장하십시오.

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이 jsfiddle의 코드가 http://jsfiddle.net/NEHZU/1/

: 여기

는 jsfiddle에 대한 예입니다 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'}); 
       });​ 

업데이트 제목 대신 왼쪽의

+0

당신은 같은 시간에'left' 속성을 애니메이션을 시도해 봤어)이 : 거의, 내가 counld't, 죄송합니다'width' CSS 내 놀 시도해야한다? – nnnnnn

답변

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/

+0

jsFiddle에서 작동하는 것으로 보이지만 로컬에서 작동하지 않는 코드를 추가하려고하면 그 이유를 찾을 수없는 것 같습니다. – user1222186

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

$는 (". 이상"). 마우스를 (함수() {

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

} 함수() {

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

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

});

당신은

http://jsfiddle.net/zxJtu/