Question

我试图让div在悬停时向上扩展，然后在mouseout上返回其原始高度。很简单。 div位于absolute，bottom：0，因此它附着在其父级的底部。问题是，我无法控制div中内容的长度，因此最高值设置为自动。

因此，我需要计算实际的顶部位置，然后将该值传递给hover（）中的第二个函数，hover（）处理mouseout动画，以恢复其原始高度。

    $('#blog3 .blog-grid li').hover(
    function () { // mouse over
        // calculate .content-box top position
        var offset = $(this).find(".content-box").offset().top - $(this).find(".content-box").parent().offset().top;

        // darken the box
        $(this).find(".content-box").css("background-color", "rgba(0,0,0,0.5)").animate({
            queue: false,
            duration: 500
        });

        // expand the content div
        $(this).find(".content-box").stop(true,true).animate({
            top: 0,
        }, {
            queue : false,
            duration : 500
        });

        $(this).find("p").fadeIn("slow");
        $(this).find(".read-more").stop(true,true).fadeIn("slow");
    }, 
    function () { // mouse out
        $(this).find(".content-box").css("background-color", "transparent").animate({
            queue: false,
            duration: 500
        });

        $(this).find(".content-box").stop(true,true).animate({
            top: offset + 'px', // <-- restore to original position
        }, {
            queue : false,
            duration : 500
        });

        $(this).find("p").stop(true,true).fadeOut("slow");
        $(this).find(".read-more").stop(true,true).fadeOut("slow");
    }
);

问题当然是我无法通过“抵消”。变量到第二个（mouseout）函数，也不能声明＆＃39; offset＆＃39;作为全局变量，因为它需要在悬停时计算。

我确定必须有另一种方法将该号码传递给第二个功能，但我似乎无法弄明白......

Answer 1

回答了我自己的问题;）

设置＆＃39;偏移＆＃39;作为全局变量，然后在鼠标悬停函数内执行位置计算。

-lstdc++fs

jquery将元素返回到其原始位置

1 个答案: