hover动画

var originalWidth = $(".post-thumb").width()
var originalHeight = $(".post-thumb").height()
$(".picDiv").height(originalHeight)

window.onresize = function() {
    //窗口尺寸发生变化后清除掉mouseenter mouseleave事件 删除style 恢复到变化前的窗口大小
    $(".post-thumb").each(function() {
         $(this).removeAttr("style")
         //停止动画 否则图片无法正常宽高 一定一定要停止 我就是在这里卡了一天
        $(this).stop(true)   
    })
    
     $(".picDiv").removeAttr("style")
     originalHeight = $(".post-thumb").height()
     originalWidth = $(".post-thumb").width()
     $(".picDiv").height(originalHeight)
     $(".post-thumb").each(function() {
         $(this).hover(mouseEnterFunction,mouseLeaveFunction)        
      })

}


function mouseEnterFunction() {
     $(this).animate({ 
         width: originalWidth * 1.05,
         height: originalHeight * 1.05
     }, 
    { duration: 300 })
}

function mouseLeaveFunction() {
     $(this).animate({ 
         width: originalWidth, 
         height: originalHeight 
     }, 
    { duration: 300 }) 
}

.picDiv {
overflow:hidden;
position:relative;
}

.cid-qQ5Y03vkMR .team-item .item-image img {
width: 100%;
overflow:hidden;
position:absolute;
left:0px;
}

转载于:https://www.cnblogs.com/miraclesakura/p/9056711.html