如何在jQuery.animate()中清除元素top值以恢复初始定位？

这问题我碰到过好几次了，核心原因是绝对定位元素同时存在top和bottom样式时，top会优先生效——你鼠标进入时通过animate给.texto添加了inline的top样式，这时候哪怕你把top设为auto/initial/unset，浏览器还是会优先识别inline的top属性，直接忽略外部CSS里的bottom:-30px设置，导致元素没法回到初始位置。

给你两种靠谱的解决方案：

方案1：移除inline的top属性，让CSS的bottom重新生效 #

把鼠标离开事件里的动画目标改成空字符串，jQuery会自动移除元素style属性中的top值，这样元素就会完全遵循外部CSS的初始设置：

var cajasHacer = $('.hacer').find('.contenido').find('.caja');
cajasHacer.each(function () {
    $(this).mouseenter(function() {
        $(this).find('.texto').animate({top: '40px'} , 300);
    });
    $(this).mouseleave(function() {
        // 用空字符串移除top的inline样式
        $(this).find('.texto').animate({ top: '' } , 300);
    });
});

方案2：直接操作bottom属性，避开top的优先级问题 #

这种方式更直观，全程只控制bottom属性，完全不碰top，从根源上避免冲突：

var cajasHacer = $('.hacer').find('.contenido').find('.caja');
cajasHacer.each(function () {
    $(this).mouseenter(function() {
        // 从初始的bottom:-30px动画到40px
        $(this).find('.texto').animate({bottom: '40px'} , 300);
    });
    $(this).mouseleave(function() {
        // 动画回初始的bottom:-30px
        $(this).find('.texto').animate({ bottom: '-30px'} , 300);
    });
});

两种方案都能解决你的问题，个人更推荐方案2，逻辑更清晰，不容易出现样式优先级的坑。

内容的提问来源于stack exchange，提问作者SlavisWolf