清除jquery.animate()中元素的最高值

时间:2018-01-03 11:50:12

标签: javascript jquery html css

我有这个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的值,但它没有清除元素的最高值,并在鼠标离开时再次移到底部。

2 个答案:

答案 0 :(得分:0)

您可以使用.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');
    });

});

DEMO

答案 1 :(得分:0)

我认为,您应该将元素的初始顶值存储在变量中。因此,当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);
        });
    });