onmouseover jQuery없이 전환 효과

Question

내 dev 사이트 http://www.new.ianroyal.co에 주 사이트 로고의 호버 효과를 위해 onmouseover를 사용합니다.

onmouseover는 사이트 로고 이미지를 즉시 변경합니다. jQuery를 사용하지 않고 전환 효과 (페이드 인 또는 일반적으로 전환 속도를 늦추십시오)를 적용 할 수 있는지 궁금합니다. 여기

내 코드

<a href="<?php echo esc_url(home_url('/')); ?>" ONMOUSEOVER='ian.src="http://new.ianroyal.co/wp-content/themes/twentytwelve/images/IN-Logo.png" '
ONMOUSEOUT='ian.src="http://new.ianroyal.co/wp-content/themes/twentytwelve/images/IN-Logo1.png" '><img src="http://new.ianroyal.co/wp-content/themes/twentytwelve/images/IN-Logo1.png" NAME="ian" class="header-image" alt="Ian Nelson"/></a>

내가 검색하고 검색 한이지만 유일한 solultions가 jQuery를 함께있는듯한 I 충분히 이해하지 못한다. 아직은.

고맙습니다.

Answer 1

css3 전환을 사용하십시오.

div { 
    height: 100px; 
    width: 100px; 
    background: url(image1.png) no-repeat; 
    -webkit-transition: all .3s ease-in-out; 
    -moz-transition: all .3s ease-in-out; 
} 

div:hover { 
    background-image: url(image2.png) 
} 

오래된 브라우저는 단순히 전환 효과를 적용하지 않습니다.

데모 :http://jsfiddle.net/elclanrs/jg7G3/

Answer 2

jQuery를 배우십시오. 나는 그것이 너를 길고 (그리고 짧게) 달릴 때 너를 행복하게 만들 것이라고 약속한다. 즉, jQuery를 알고 나면 바닐라 js로 돌아가서 어떻게 작동하는지 실제로 이해할 수 있습니다.

$(function() { 
    $('a').fadeOut(); 
    $('a').attr('src', '{new image path}'); 
    $('a').fadeIn(); 
}); 

Answer 3

이 이상적으로, 단지 comme ça 완전히 그것의 JS를 CSS 전환과 :hover 선택기를 사용하고 떠나 :로

예를 들어, JQuery와의 문제는 간단하다.

Answer 4

순수 CSS3를 사용할 수 있습니다.

.fade { 
opacity: 1; 
transition: opacity .25s ease-in-out; 
-moz-transition: opacity .25s ease-in-out; 
-webkit-transition: opacity .25s ease-in-out; 
} 

.fade:hover { 
    opacity: 0.5; 
    } 

예 here 찍은. 다른 많은 가능성이 있지만 좋은 시작이되어야합니다.

그러나 CSS3 전환을 지원하는 브라우저에서만 작동합니다. Internet Explorer는 특히 late to the game이고 여전히 lots of people out there using it (및 CSS3을 지원하지 않는 다른 브라우저의 이전 버전)이 있습니다.

이전 버전에 대한 지원을 극대화하는 진정한 크로스 브라우저 솔루션을 원한다면 JQuery가 실제로 갈 방법입니다. 그러나 열심히 그것이 보인다, 퇴색을하는 것을 배우는 것에 투자 된 시간은 정말로 갚을 것이다. 그리고 JQuery가 무료로 제공하는 동일한 브라우저 간 호환성을 제공하는 동등한 순수 JavaScript 솔루션을 수행하는 것보다 JQuery를 수행하는 방법을 배우는 것이 거의 확실합니다.

Answer 5

근무 예를 들어, 그냥 같은 디렉토리에에서는 image1.jpg 및에서는 image2.jpg을 제공

실제로

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.js" type="text/javascript"></script> 
<script> 
$(function() { 

$('img').mouseenter(function(){ 
    $(this).fadeOut('fast', function(){ 
    $(this).attr('src', $(this).data('on')); 
    $(this).fadeIn(); 
    }); 
}); 

$('img').mouseleave(function(){ 
    $(this).fadeOut('fast', function(){ 
    $(this).attr('src', $(this).data('off')); 
    $(this).fadeIn(); 
    }); 
}); 


}); 

</script> 

<img width="100" height="100" src="image1.jpg" data-on="image2.jpg" data-off="image1.jpg">