Question

I have 2 divs A & B. div A has a position absolute to the relative wrapper parent of both divs.
div A is positioned above div B from getting the position of div B – offset 0 -50.

now the hover is working well in the first hover(div A left: 561px) but in the second hover it goes left: 1022px. and the third time it’s still 1022px.
even if on the hover off function I reset the left to 0.

$(".longlist").hover(function () {
    $(this).next("div.hoverwrapper").position({
        "my": "center top",
        "at": "center top",
        "offset": "0 -50",
        "of": $(this)
    });
    $(this).next("div.hoverwrapper").css('z-index', '100');
    $(this).next("div.hoverwrapper").animate({
        opacity: "show",
        top: "-75"
    }, "slow");
}, function () {
    $(this).next("div.hoverwrapper").css('z-index', '-1');
    $(this).next("div.hoverwrapper").animate({
        opacity: "hide",
        top: "-10"
    }, "fast");
    $(this).next("div.hoverwrapper").css({
        "top": "0",
        "left": "0"
    });
});

I don’t understand why is it happening…

Answer 1

$(".longlist").hover(function () {
    $(this).next("div.hoverwrapper").position({
        "my": "center top",
        "at": "center top",
        "offset": "0 -50px",
        "of": $(this)
    });
    $(this).next("div.hoverwrapper").css('z-index', '100');
    $(this).next("div.hoverwrapper").animate({
        opacity: 1,
        top: -75
    }, "slow");
}, function () {
    $(this).next("div.hoverwrapper").css('z-index', '-1');
    $(this).next("div.hoverwrapper").animate({
        opacity: 0,
        top: -10
    }, "fast");
    $(this).next("div.hoverwrapper").css({
        "top": 0,
        "left": 0
    });
});

You don’t have to change the thing with opacity, but if you give positions as strings they must have “px” (except 0), so top: “-75” is no valid amount, it must be “-75px” or just numeric -75.