清除jquery.animate（）中元素的最高值

Question

我有這個CSS：

.hacer .contenido .caja .texto {
    position: absolute;
    bottom: -30px;
}

我有這個jQuery的

 var cajasHacer = $('.hacer').find('.contenido').find('.caja');

        cajasHacer.each(function () {

        $(this).mouseenter(function() {
            $(this).find('.texto').animate({top: '40px'} , 300);
        });

        $(this).mouseleave(function() {
            $(this).find('.texto').animate({ top: 'auto'} , 300);
        });
    });

我已經使用了top的值：initial，unset和auto，但是它不會清除元素的最高值，並且在鼠標離開時不會再次移至底部。

Answer 1

您可以使用.removeAttr()方法通過刪除樣式屬性值來重置頂部值。

var cajasHacer = $('.hacer').find('.contenido').find('.caja');

    cajasHacer.each(function () {

    $(this).mouseenter(function() {
        $(this).find('.texto').animate({top: '40px'} , 300);
    });

    $(this).mouseleave(function() {
        $(this).find('.texto').removeAttr('style');
    });

});

演示

Answer 2

我認為，您應該將元素的初始最大值存儲在變量中。 因此，當mouseleave事件觸發時，可以將其添加到元素中。

var topPos = $(element).offset().top;

並在您的代碼中：

var cajasHacer = $('.hacer').find('.contenido').find('.caja');

        cajasHacer.each(function () {

        $(this).mouseenter(function() {
            $(this).find('.texto').animate({top: '40px'} , 300);
        });

        $(this).mouseleave(function() {
            $(this).find('.texto').animate({ top: topPos} , 300);
        });
    });