Javascript-форум (https://javascript.ru/forum/)
-   jQuery (https://javascript.ru/forum/jquery/)
-   -   animate, всплывающий div box сделать по центру (https://javascript.ru/forum/jquery/12633-animate-vsplyvayushhijj-div-box-sdelat-po-centru.html)

zero_mod 26.10.2010 20:13

animate, всплывающий div box сделать по центру
 
Есть 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.


Часовой пояс GMT +3, время: 20:54.