jQuery를 호버 여기

Question

을 .animate로 마우스를 내 코드입니다 그것은 텍스트를 보여 주며 마우스가 이미지 영역을 떠날 때마다 (위에서 언급 한 코드 에서처럼) "기본 텍스트"를 보여줍니다. 그것은 다음과 같이 보일 것입니다 : http://jsfiddle.net/xgyaQ/ 그러나 볼 수 있듯이 프리젠 테이션 목적으로 만 animate ({opacity : 'toggle'}) 함수를 추가 했으므로 작동하지 않습니다.

두 번째 애니메이션 효과가있는 첫 번째 코드의 기능이 필요하며이를 달성하기 위해 자바 스크립트를 작성하는 방법을 알지 못합니다.

그리고 한 가지 더 - 어떤 생각을 바꾸어야 기본 텍스트가 이미지 사이의 빈 공간을 가리킬 때 표시되지 않습니다. 왜냐하면 이미지를 다른 이미지로 가져 가면 멋진 모양이 아니기 때문입니다.

감사합니다.

P. 좋아, Liquinaut 덕분에 나는 그것이 fadeIn 효과 작업을 만들었지 만, 첫번째 요소를 숨기기 :

$(document).ready(function() { 
    $("img").mouseenter(function() { 
     var text = $(this).attr("alt"); 
     $("h2").text(text).hide().fadeIn(400); 
    }); 
    $("ul").mouseleave(function() { 
     $("h2").text('Basic Text').hide().fadeIn(400); 
    }); 
}); 

http://jsfiddle.net/FUnhK/3

을 내가 찾던 효과 이잖아. 그것을 성취 할 수있는 더 좋은 방법이 있습니까? 로, 그럼에도 불구하고 당신이 당신의 CSS의 일부를 재 구축에 대해 생각해야

$(document).ready(function() { 
    $("img").mouseenter(function() { 
     var text = $(this).attr("alt"); 
     $("h2").text(text); 
    }); 
    $("ul").mouseleave(function() { 
     $("h2").text('Basic Text'); 
    }); 
}); 

:

Answer 1

좋은 생각 절대 위치 지정된 이미지 요소가있는 부동 목록 요소는 의미가 없습니다. 정말 애니메이션에 대한 내 두 번째 문제를 해결한다,하지만

CYA, Liquinuat

Answer 2

나는이 샘플이 당신이 당신의 HTML/CSS를 기반으로, 필요한 아마

$(item).hover(function() { ... }, function() { ... }); 
In your case: 

    $("a.button").hover(
     function() { 
      $(this).animate({"marginTop": "0px"}, "fast"); 
     }, 
     function() { 
      $(this).animate({"marginTop": "16px"}, "fast"); 
     } 
    );