JQUERY 배경 그림 그 라 데 이 션 실현 (페 이 드 아웃) (회전)

JQUERY 배경 그림 그 라 데 이 션 실현 (페 이 드 아웃)
2 하나, 2010
in jquery
일반적인 CSS Hover 는 배경 그림 을 최대한 많이 바 꿔 서 보기 좋 지 않 습 니 다. jquery 를 이용 하여 페 이 드 효 과 를 더 해 드 리 겠 습 니 다.
여기 서 이 예 를 보면 제 가 연습 을 해 볼 게 요. 효 과 는 볼 수 있 을 것 같 아 요.http://dragoninteractive.com/사이트 ~, 멋있다 ~
실현 원리
두 장의 서로 다른 그림 을 통 해 두 개의 서로 다른 층 이 겹 쳐 져 있 고 꼭대기 층 은 잠시 투명 하 며 마우스 가 올 라 갈 때 꼭대기 층 은 투명 에서 불투명 으로 바 뀌 고 마 우 스 는 반대로 떠난다.
준비 작업
PS 로 그림 을 만 듭 니 다 ~ 아래 그림 은 높이 가 얼마 인지 기억 하 세 요.나의 이 그림 의 높이 는 두 개의 40px 그림 이다.
다음은 코드 html 구조:

1
            

<a id="logo" href="http://fatkun.com"><span>fatkun.com</span></a>

css 코드:

 #logo{
margin:0 auto;
position:relative;/*    ,    hover     */
background:url(fatkun.png) left top no-repeat;/*     */
width:150px;
height:40px;/*      */
display:block;
text-indent:-9999px;
}
#logo .hover{/* JQ  */
background:url(fatkun.png) left bottom no-repeat;/*background-position     */
position:absolute;/*            */
top:0;
left:0;
height:40px;
width:150px;
}

마지막 으로 가장 중요 한 JQuery 코드 가 나 왔 습 니 다.

   
<script type="text/javascript">
$("#logo").append("");//               
$(".hover").css('opacity', 0);//    
$(".hover").parent().hover(
function(){
$(".hover").stop().animate({opacity: '1'},1000);
},
function(){
$(".hover").stop().animate({opacity: '0'},1000);
});
script>

다음으로 전송:https://www.cnblogs.com/vingi/articles/1712451.html