<script type="text/javascript">
jQuery( function() {
jQuery( '.dvideo_img' ) .hover(
function(){
jQuery( ".dvideo_star").stop(). animate({opacity: 'show',},{duration: 500,easing: 'swing',})
},
function(){
jQuery( ".dvideo_star").stop(). animate({opacity: 'hide',},{duration: 500,easing: 'swing',})
})
} );
</script>
htmlコード
<div class="dvideo"> <div class="dvideo_img"> <img src="/img/60474568.jpg" width="160"> <div class="dvideo_star"> <img src="/img/stars/6.png" width="160" height="34"> </div> </div> <div class="dvideo_title"> 最強のふたり </div> </div class="dvideo">
css
/*VIDEO*/
.dvideo{
float: left;
margin-right: 5px;
}
.dvideo_img{
position: relative;
}
/*.dvideo_img:hover .dvideo_star{ display:inline-block}*/
.dvideo_star{
position: absolute;
left: 0px;
bottom: 0px;
display:none;
}
.dvideo_title{
font-size: 12px;
}
参考
jQuery の animate で、透明⇔不透明のアニメーション動作
ソースを見るから見ると分かりやすい。
http://alphasis.info/2011/05/jquery-animate-opacity/
マウスオーバーアニメーションの基本型
http://www.webopixel.net/javascript/179.html
これはhoverだけではなく、他のアニメーションでも有効です。意図せず連続してアニメーションしてしまうときに試してみてください。
http://logic-a.com/2012/05/14/jquery_hover_event_crazy_animation_stopper/