<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/