페이드 인 효과 추가하기 li : jquery로 호버

WordPress에서 새로운 테마를 코딩 중이며 이전 인터페이스보다 더 많은 애니메이션 페이지를 표시하고 싶습니다.페이드 인 효과 추가하기 li : jquery로 호버

li:hover 요소에 몇 가지 효과 (예 : 페이드 인 효과)를 추가하고 싶습니다. 어떻게해야합니까?

/*Videos*/ 
.PozVideos {float:left;width:940px;min-height:155px;margin:0px 0px 20px 0px;} 
.PozVideos .Caption {float:left;width:930px;padding:0px 0px 10px 10px;margin-bottom:8px;border-bottom:1px solid #F8F8E6;height:25px;line-height:33px;font-size:14px;color:#fff;overflow: hidden;} 
.PozVideos ul {padding:0px;margin:0px 0px 5px 7px;} 
.PozVideos ul li {float:left;width:150px;height:100px;margin-right:5px;background:#F8F8E6;text-align:center;} 
.PozVideos ul li img {float:left;width:140px;border:none;height:90px;padding:5px;} 
.PozVideos ul li:hover {float:left;opacity:0.7;filter:alpha(opacity=70); /* For IE8 and earlier */} 
.PozVideos .Title {float:left;margin:-35px 0px 0px 0px;width:150px;height:30px;line-height:15px;} 
.TransationsImages {opacity:0.4;filter:alpha(opacity=40); /* For IE8 and earlier */} 
.TransationsImagesHover {opacity:0.7;filter:alpha(opacity=70); /* For IE8 and earlier */} 
.TransationsTitle {opacity:0.9;filter:alpha(opacity=0.9); /* For IE8 and earlier */} 

.Pozn-img-play { 
    background:transparent; 
    position:relative; 
    z-index:1; 
    cursor:pointer; 
    width:150px; 
    height:100px; 
    border:0px; 

} 

.Pozn-img-play:hover { 
    background:url('img/play.png') no-repeat center center; 
}

HTML : 당신은이 CSS를 추가 할 필요가

<!--Videos--> 
<div class="PozVideos BgPurple RadiusTopTen"> 
    <div class="Caption">Video Galeri</div> 
    <ul> 
     <li><div class="PotImage"><a href=""><img src="assets/demo/video.jpg" alt=""></a><div class="Pozn-img-play"></div></div></li> 
     <li><div class="PotImage"><a href=""><img src="assets/demo/video.jpg" alt=""></a></div></li> 
     <li><div class="PotImage"><a href=""><img src="assets/demo/video.jpg" alt=""></a></div></li> 
     <li><div class="PotImage"><a href=""><img src="assets/demo/video.jpg" alt=""></a></div></li> 
     <li><div class="PotImage"><a href=""><img src="assets/demo/video.jpg" alt=""></a></div></li> 
     <li><div class="PotImage"><a href=""><img src="assets/demo/video.jpg" alt=""></a></div></li> 
    </ul> 
</div> 
<!--Videos-->

출처

2012-11-17 Fatih Toprak

실제로 나는 jquery couldt에 대한 새로운 것이 있습니다. 리 호버를위한 애니메이션 (.Pozn-img-play)으로 재생 아이콘을 표시하고 싶습니다. –

또한 감사합니다. @David, 나도 영어를 배우기 시작합니다. (: 나는 터키어이므로 영어를하지 못합니다. 정말 잘 ..) –

.Pozn-img-play { 
     background:transparent; 
     position:relative; 
     z-index:1; 
     cursor:pointer; 
     width:150px; 
     height:100px; 
     border:0px; 
     opacity: 1; 
     transition: opacity .5s ease-in-out; 
     -moz-transition: opacity .5s ease-in-out; 
     -webkit-transition: opacity .5s ease-in-out; 

    } 

    .Pozn-img-play:hover { 
     background:url('img/play.png') no-repeat center center; 
     opacity: 0.1; 
    }

출처

2012-11-17 20:32:13

고마워,하지만이 IE 브라우저 괜찮아? jquery 효과 방법은 CSS 3 전환 메소보다 낫다고 생각하십니까? –

여기를 확인 http://caniuse.com/ –

대단해! 그리고 대단한 대답;) –

이 fiddle을 시도

여기 내 CSS입니다. jQuery를 css 대신 사용하면이 효과를 더 부드럽게 만들 수 있습니다.

fadeIn, fadeOut 중 하나를 사용할 수 있습니다. CSS3 대신 jQuery를 사용하면 브라우저 호환성이 좋아집니다.

출처

2012-11-17 20:45:45 SachinGutte

페이드 인 효과 추가하기 li : jquery로 호버

답변

관련 문제