центрированные зависающие пузыри с jquery

Question

Я хотел бы отображать всплывающие пузыри с jquery, когда пользователь наводил на красные ящики. Проблема в том, что код, который я объединил, просто экспериментировал ... это не имеет смысла!

http://jsfiddle.net/PKzsS/

$(window).load(function() { 
    $("#headloginuser ul li a").hover(function() { 
     divW = $(this).next("div").width()/4; 
     $(this).next("div").css({marginLeft: -divW }).animate({ opacity: "show" }, "fast"); 
    }, function() { 
     $(this).next("div").animate({opacity: "hide"}, "fast"); 
    }); 
}); 

Это центрирует ее, более или менее, но не идеально, конечно :), но я dividng ширину на 4! не следует ли просто разделить его на 2? Итак, у меня половина ширины скрытого div, и я перемещаю его точно так же, как влево?

я запутался :)

С.

Answer 1

Да, разделив на 2 получит вас почти нет. Но знайте, что это центрирует его по отношению к его исходной точке, которая так и будет совпадать с левой стороной красного квадрата выше. Предполагаю, что вы пытаетесь сосредоточиться по отношению к центру коробки, если это так, вам также нужно будет учитывать ширину ящиков, разделенную на 2.

Я изменил следующую строку и, казалось, был в центре :

divW = ($(this).next("div").width()/2) - ($(this).outerWidth()/2); 

--edit--

Я перешел на использование outerWidth() вместо width(), как я заметил, что вы были отступы на третьей кнопке. Не уверен, если вы хотите это объяснить.