이미지 위에 마우스를 올려 놓을 때 간단한 jQuery 슬라이딩 효과 만들기

Question

누군가가 내 페이지의 이미지 위에 마우스를 올리면이 간단한 jQuery 효과를 어떻게 만듭니 까?

A JSFiddle 예 can be found here. 나는 누군가가 이미지 또는 상자의 일부를 입력하면 원하는

는 텍스트 영역은 자세한 내용을 공개 확대 될 전망이다.

마우스를 놓을 때 텍스트 영역이 축소되어 이미지 만 볼 수있게해야합니다.

$("#free-roster .roster-container .champion").mouseenter(function() { 
    $(this).find(".info").animate({ width: "116px" }, 400); 
}); 

$("#free-roster .roster-container .champion").mouseleave(function() { 
    $(this).find(".info").animate({ width: "0px" }, 400); 
}); 

Answer 1

이 jQuery를 나를 위해 작동합니다 : 당신의 CSS 추가 기능에서

$("#free-roster .roster-container .champion").mouseenter(function() { 
    $(this).find(".info").animate({ width: "116px" }, 400); 
}); 

$("#free-roster .roster-container .champion").mouseleave(function() { 
    $(this).find(".info").animate({ width: "0px" }, 400); 
}); 

$("#free-roster .roster-container .champion").mouseleave(); 

:

color: white; 

에 :

#free-roster .roster-container .champion .info 

다음

내 시도

http://jsfiddle.net/9EFsE/1/