jQuery에서 토글 이미지의 CSS 전환 추가

내 토글 이미지간에 전환 (페이드 인/페이드 아웃)을 추가하고 싶습니다. 가능하니?jQuery에서 토글 이미지의 CSS 전환 추가

$(function(){ 

var $toggleImg = $('.toggleImg'); 

    function fnToggleImg(e){ 
     if (e.type == 'click') { 
      $(this).data('clicked', !$(this).data('clicked')); 
     } else if (!$(this).data('clicked')) { 
      this.src = this.src.indexOf('-hover') == -1 ? this.src.replace("-normal", "-hover") : this.src.replace("-hover", "-normal"); 
     } 
    } 

    if (Modernizr.touch){ 
     $toggleImg.hammer(); 

      $('img.rollover').on('touchstart touchend', fnToggleImg); 
     } else { 
      $('img.rollover').on('mouseenter mouseleave', fnToggleImg); 
    } 

$toggleImg.on(Modernizr.touch ? 'tap' : 'click', fnToggleImg); 

});

출처

2014-04-08 Xroad

당신이하고있는 모든 일이'src'을 바꾸는 것으로 보이기 때문에, 변화시킬 CSS가 없으므로 전환이 없습니다. JQ 애니메이션을 사용해야합니다. 그러나 JSFiddle이 유용 할 것입니다. –

좋아, JSFiddle을 만들었습니다. http://jsfiddle.net/Xroad/rY8Bq/ 내 이미지 버튼에 CSS 전환 효과를 만들고 싶습니다. – Xroad