css3 또는 jquery 불투명도 애니메이션 효과

Question

나는이 HTML 코드를 가지고 있습니다.

<a class="fade fade1" href="#"></a> 
<a class="fade fade2" href="#"></a> 
<a class="fade fade3" href="#"></a> 

과 a.fade이 절반으로 불투명도로 설정하고 기본적으로

그래서 위의 선언 그 CSS3를 기반으로

a.fade 
{ 
width: 249px; 
height: 90px; 
float: none; 
clear: both; 
margin: 8px auto; 
overflow: auto; 
display: block; 

/*fade*/ 
/* Theoretically for IE 8 & 9 (more valid) */ 
    /* ...but not required as filter works too */ 
    /* should come BEFORE filter */ 
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; 

    /* This works in IE 8 & 9 too */ 
    /* ... but also 5, 6, 7 */ 
    filter: alpha(opacity=50); 

    /* Older than Firefox 0.9 */ 
    -moz-opacity:0.5; 

    /* Safari 1.x (pre WebKit!) */ 
    -khtml-opacity: 0.5; 

    /* Modern! 
    /* Firefox 0.9+, Safari 2?, Chrome any? 
    /* Opera 9+, IE 9+ */ 
    opacity: 0.5; 
} 
a.fade1 
{ 
background: transparent url(http://jameskbrooks.com/wp- content/uploads/2012/11/MC2151023682-e1353394381773.gif) no-repeat top left; 
} 
a.fade2 
{ 
background: transparent url(http://jameskbrooks.com/wp- content/uploads/2012/11/MC2151023684-e1353394564665.gif) no-repeat top left; 
} 
a.fade3 
{ 
background: transparent url(http://jameskbrooks.com/wp-   content/uploads/2012/11/MC2151023683-e1353394572666.gif) no-repeat top left; 
} 
a.fade:hover 
{ 

/*fade*/ 
/* Theoretically for IE 8 & 9 (more valid) */ 
    /* ...but not required as filter works too */ 
    /* should come BEFORE filter */ 
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; 

    /* This works in IE 8 & 9 too */ 
    /* ... but also 5, 6, 7 */ 
    filter: alpha(opacity=100); 

    /* Older than Firefox 0.9 */ 
    -moz-opacity:1.0; 

    /* Safari 1.x (pre WebKit!) */ 
    -khtml-opacity: 1.0; 

    /* Modern! 
    /* Firefox 0.9+, Safari 2?, Chrome any? 
    /* Opera 9+, IE 9+ */ 
    opacity: 1.0; 

    -webkit-transition: opacity 600ms linear; 
    -moz-transition: opacity 600ms linear; 
    -o-transition: opacity 600ms linear; 
    transition: opacity 600ms linear; 

} 

위의 그 html 요소에 대해이 CSS, 다음 때마다 사용자 호버 또는 마우스 오버 그 요소들에 불투명도는 절반의 불투명도에서 완전한 불투명도로 페이드 인 것처럼 애니메이션으로 가득 채워지지만 문제는 내가 그 요소에서 마우스를 끌어 올 때마다 전체 불투명도에서 페이드 아웃 한 애니메이션이 없다는 것입니다. 기본 불투명도는 50 %입니다. 나는 이것이 jquery에 의해 행해질 수 있었다는 것을 알고있다 그래서 나는 그것을하기 위하여 어떻게에 관하여 단서를주기 위하여 여기에서 누군가를 찾고있다. css3 선호.

희망 사항을 통해 문제를 해결할 수 있습니다. 감사합니다.

아이디어, 권장 사항 및 제안 사항이 열려 있습니다.

Answer 1

jQuery는 개체의 불투명도를 변경하기 위해 fadeIn(), fadeOut() 및 fadeIn()을 제공합니다. 방아쇠 fadeIn(), fadeOut() 또는 fadeIn()은 $("a.fade").hover()입니다. 예를 들어

, 참고로

$("a.fade").hover(
    function() { $(this).fadeTo("slow", 0.5); }, 
    function() { $(this).fadeTo("slow", 1); } 
); 

, http://api.jquery.com/fadeTo/

Answer 2

예를 jQuery를에서 작업을 수행 할 수 있습니다

$('#container') 
    .on('mouseover', 'a.fade', function(){ 
    $(this).animate({'opacity': 1}, 500) // animate to 100%, in 500 ms 
    }) 
    .on('mouseout', 'a.fade', function(){ 
    $(this).animate({'opacity': 0.5}, 500) // animate to 50%, in 500 ms 
    })