jq利用 animate和mouseenter 做出一些渐变效果

柔情只为你懂 2024-02-17 17:33 46阅读 0赞

![这里写图片描述][20160609105449388]  
如上图所示，鼠标以上时候缓慢变化增加文字说明  
以下为HTML和CSS以及JS代码

$(document).ready(function(){
        
      $(".common_list li").mouseenter(function(){
        
         $(this).find(".list_cover").stop().animate({opacity: "0.8"});
         $(this).find(".left_line").stop().animate({opacity: 1,left: "111px"});
         $(this).find(".right_line").stop().animate({opacity: 1,right: "111px"}) ;
         $(this).find(".list_play").stop().animate({opacity: 1,top: "0"})
      });
      $(".common_list li").mouseleave(function(){
        
         $(this).find(".list_cover").stop().animate({opacity: "0"});
         $(this).find(".left_line").stop().animate({opacity: 0,left: "90px"});
         $(this).find(".right_line").stop().animate({opacity: 0,right: "90px"}) ;
         $(this).find(".list_play").stop().animate({opacity: 0,top: "20px"})
      });
    });

.common_list li{
        width:360px;height:290px;float:left;margin-right:30px;font-size:0}
    .common_list li:nth-child(3){ margin-right:0}
    .common_list li a{
        width:360px;height:240px;display:inline-block;position:relative}
    .common_list li a img{
        width:360px;height:240px}
    .common_list li a .list_cover{
        width:360px;height:240px;background:#000;position:absolute;left:0;top:0;opacity:0;filter:alpha(opacity=0);-webkit-filter:alpha(opacity=0);-ms-filter:alpha(opacity=0);-moz-filter:alpha(opacity=0)}
    .common_list li a .left_line{
        width:30px;height:1px;background:#fff;position:absolute;top:119px;left:90px;opacity:0;filter:alpha(opacity=0);-webkit-filter:alpha(opacity=0);-ms-filter:alpha(opacity=0);-moz-filter:alpha(opacity=0)}
    .common_list li a .right_line{
        width:30px;height:1px;background:#fff;position:absolute;top:119px;right:90px;opacity:0;filter:alpha(opacity=0);-webkit-filter:alpha(opacity=0);-ms-filter:alpha(opacity=0);-moz-filter:alpha(opacity=0)}
    .common_list li a .list_play{
        width:360px;height:240px;text-align:center;font-size:20px;color:#fff;line-height:240px;position:absolute;left:0;top:20px;opacity:0;filter:alpha(opacity=0);-webkit-filter:alpha(opacity=0);-ms-filter:alpha(opacity=0);-moz-filter:alpha(opacity=0)}
    .common_list li p{
        text-align:center;margin-top:16px;font-size:16px;height:18px;line-height:18px;color:#31343b}

[20160609105449388]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/30/aaf8cd0020564565bb0e365d95c1fb87.png