jQuery实现鼠标悬浮在图片上，图片透明，并且出现文字

作者: Joe_Somebody | 来源:发表于2017-08-03 16:49 被阅读0次

html

        <div>
          ![](./../assets/product/productWater.png)
          <span class="jj">简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介</span>
          <p>净水机型号</p>
        </div>
        <div>
          ![](./../assets/product/productWater.png)
          <span class="jj">简介</span>
          <p>净水机型号</p>
        </div>
        <div>
          ![](./../assets/product/productWater.png)
          <span class="jj">简介</span>
          <p>净水机型号</p>
        </div>
      </div>

jQuery

          jQuery("span.jj",this).slideToggle(500);
          jQuery("img",this).animate({
            opacity: 0.1
          },5,function(){
              jQuery(".top > div").mouseleave(function(){
                jQuery("img",this).animate({
                  opacity: 1
                },5)
              })
          });
        });