Question

我正试图在jQuery中实现一个带有一点差异的垂直手风琴菜单。我想为主菜单左侧的箭头和子菜单右侧的箭头设置动画。

我可能无法想象它但我的问题很简单。当点击一个元素时，我需要获得它的顶部位置，但是在我点击该元素后它的位置发生了变化，因为它的子菜单正在缩小或扩大。

如何在动画子菜单并更改其位置后获取该元素的最新位置？

您可以在下面找到代码。它可以解释自己..

$("#firstpane p.menu_head").click(function(e)
{
    $('#larrow').hide();
    $(this).next("div.menu_body").slideToggle(300).siblings("div.menu_body").slideUp("slow");
    $('#bgImageContainer').show();
    $('.slidesContainer').hide();
    $('.slidesThumbs').hide();

    if($(this).hasClass('subcategory')){
        animateLeftArrow(this);
    }
});

function animateLeftArrow(item){
    var pos = $('#rarrow').css('top').replace(/[^-\d\.]/g, '');
    var itpos = $(item).position();
    if($(item).hasClass("first"))
        lastpos = itpos.top -202 + 9;
    else
        lastpos = itpos.top - 202;
    $('#rarrow').show();
    $('#rarrow').animate({
        top: lastpos
    });
}

Answer 1

$('#rarrow').animate(
    { top: lastpos },
    1000,
    function(){
        console.log($(this).offset());
    }
);

Answer 2

您需要在animate上使用回调函数。（http://api.jquery.com/animate/）

$('#rarrow').animate(
{
    alert("before");
}, 1000,
function()
{
    alert("after");
});

jquery在一些动画改变其位置后获取元素的最新顶部位置

2 个答案: