Вход

Просмотр полной версии : animate, всплывающий div box сделать по центру


zero_mod
26.10.2010, 20:13
Есть 2 div box'a (photo_box и property_box). Вроде как один box (photo_box) это div с уменьшенной картинкой, а второй box (property_box) это div, куда входит увеличенная картинка с детальным описанием этой картинки. Второй box всплывает при наведении на первый (меньший) box. Когда указатель мыши вне области второго div box, тот скрывается.

Написал так:

$(".photo_box").mouseenter(function(){
$(".property_box").stop().animate({opacity: "1.0", width: "241", height: "303"}, "slow");
});

$(".property_box").mouseleave(function(){
$(".property_box").stop().animate({opacity: "0.0", width: "0", height: "0"}, "slow");
});


Всё работает. Да вот только всплывание property_box происходит начиная сверху слева и заканчивая снизу справа. Тоже самое с скрытием, только наоборот.
Так вот нужно чтобы это было всё по центру. Вобщем чтоб всплывало начиная от самого центра photo_box.

Спасибо за помощь.

danik.js
27.10.2010, 00:23
устанавливаем для начала position: absolute для property_box .Затем в момент его появления находим положение photo_box через .offset(), он вернет left и top относительно документа. Находим координаты центра дива. Присваиваем их соответсвенно свойствам left и top property_box'а. И в добавок анимируем отрицательный марджин, равный половине ширины и высоты соответственно: marginLeft: -120, marginTop: -151.