jQuery를 사용하여 CSS 배경에 페이드 인하는 쉬운 방법이 있습니까?

배경을 가리 키기 위해 마우스를 올리면 사용하는 CSS가있는 IMG가 있습니다. jQuery를 사용하여 백그라운드에서 페이드 아웃하는 쉬운 방법이 있습니까?jQuery를 사용하여 CSS 배경에 페이드 인하는 쉬운 방법이 있습니까?

내 현재 코드는 다음과 같습니다

HTML: <img id="home-logo" src="path/logo-home.png">` 
CSS: #home-logo:hover { background: url(path/logo-back.png) right bottom no-repeat;}

출처

2011-01-27 Jon

예. 다른 요소에 배경을 놓고 그 요소를 희미하게합니다. 배경 이미지 불투명도는 모든 브라우저 또는 JavaScript 라이브러리에서 지원되지 않습니다. – eyelidlessness

의견/아이디어 주셔서 감사합니다. 저는 그 개념을 가지고 놀 것입니다. 그래도 질문 : 페이드 인 (fade in) 및 페이드 아웃 (fade in) 할 때 가져올 수는 있지만, 어떻게 페이드 인 (fade in)으로 투명하게로드 할 수 있습니까? – Jon

그것을 알아 냈습니다. 눈가리개 도움에 감사 드리며, 귀하의 제안이 도움이되었습니다. – Jon

내가 그것을 파악하고이 작업을 수행하는 가장 좋은 방법을 발견 배경 대신 두 개의 이미지를 사용하는 것이 었습니다 :

HTML: 
    <img id="home-link" src="path/logo.gif"><img id="home-fade" src="path/logo-fade.gif"> 

CSS: 
    #home-link { cursor:pointer; } 
    #home-fade { display:none; } 

JS: 
    $(document.body).hover(function() { 
      $("#home-fade").fadeIn('slow'); 
     },function(){ 
      $("#home-fade").fadeOut('slow'); 
     });

출처

2011-01-27 14:42:25 Jon

예! 이 내용을 사용할 수 있습니다 ...

$('#home-logo').hover(function(){ 
    $(this).fadeIn('slow', function() { 
    //do something 
    }); 
});

자세한 내용은이 자습서를 참조하십시오. fadeIn

출처

2011-01-27 06:15:18 Vivek

불투명도가 희미해질 필요가있을 수 있습니다.이 경우 불투명도를 fadeTo 방법을 사용할 수 있습니다. 첫 번째 인수는 지속 시간 또는 속도이고 두 번째 인수는 불투명도 값입니다.

jQuery 코드 :

$('#home-logo').hover(
    function(){ 
     $(this).fadeTo('slow',0.2); 
    }, 
    function(){ 
     $(this).fadeTo('slow', 1.0); 
    });

HTML 코드 :

<img id="home-logo" src="path/logo-home.png">

DEMO

출처

2011-01-27 07:36:05

감사합니다. 나는 그걸 가지고 놀았다. 불행하게도 이미지가 흐릿 해지지 만 배경은 좋지 않습니다. – Jon

그런 경우에는 2 개의 이미지, 1 개의 로고 및 배경 이미지가 필요합니다. –

jQuery를 사용하여 CSS 배경에 페이드 인하는 쉬운 방법이 있습니까?

답변

관련 문제