Высота jQuery animate расширяется наружу, а не вниз - PullRequest
Новая
       26

Высота jQuery animate расширяется наружу, а не вниз

0 голосов
/ 06 октября 2011

Я создаю для моей сестры веб-сайт SarahNWatson.com / new .У меня есть большой фото / видео альбом.Для реальных страниц контента, таких как ее Био, у меня есть так, что он открывает модальное окно.

Прямо сейчас у меня есть модальное окно, так что высота начинается с 0px, а затем открывается, но это дает мнеэффект скольжения вниз.Я хочу, чтобы это открылось наружу, как будто что-то было в коробке, толкающей в обоих направлениях.Как я могу сделать это?

Вот код: 

function createModal(filler) {
                    var $this = $(this);
                    var $body = $('body');
                    var winHeight = $(window).height();
                    var winWidth = $(window).width();

                    $body.prepend('<div id="blackout">');
                    $("#blackout").css({ height:winHeight }).fadeIn(1800);
                    $body.prepend('<div id="modal_window">');
                    $("#modal_window").html(filler).fadeIn(2000);

                    var modalHeight = $("#modal_window").height();
                    var modalWidth = $("#modal_window").width();

                    var offsetH = winHeight/2 - modalHeight;
                    var offsetW = winWidth/2 - modalWidth/2;
                    $("#modal_window").css({ top:offsetH, left:offsetW, height:'0px' }).animate({ height:modalHeight });
                }

И CSS: 

#modal_window {
    position: absolute;
    z-index: 1000;
    width: 600px;
    background: rgba(0,0,0,.8);
    padding: 15px;
}

Ответы [ 3 ]

1 голос
/ 06 октября 2011

Начните с offsetH = winHeight/2 и offsetW = winWidth/2.Затем анимируйте все свойства CSS top, left и height.Окончательная вершина будет (winHeight - modalHeight)/2, а последняя левая будет (winWidth - modalWidth)/2. 

function createModal(filler) {
    var $this = $(this);
    var $body = $('body');
    var winHeight = $(window).height();
    var winWidth = $(window).width();

    $body.prepend('<div id="blackout">');
    $("#blackout").css({ height:winHeight }).fadeIn(1800);
    $body.prepend('<div id="modal_window">');
    $("#modal_window").html(filler).fadeIn(2000);

    var modalHeight = $("#modal_window").height();
    var modalWidth = $("#modal_window").width();

    var offsetH1 = winHeight/2;
    var offsetH2 = (winHeight-modalHeight)/2;
    var offsetW = (winWidth-modalWidth)/2;

    $("#modal_window")
        .css({ top:offsetH1, left:offsetW, height:'0px' })
        .animate({ top:offsetH2, height:modalHeight });
}

ОБНОВЛЕНИЕ: Образец кода обновлен только для анимации по вертикали.

По существу,Вы двигаете коробку вверх, когда она становится выше.Таким образом, вместо того, чтобы скользить вниз, это создает видимость расширения от середины.

0 голосов
/ 06 октября 2011

Попробуйте использовать настройку CSS Bottom вместо Top.Затем вы должны использовать нижнюю часть элемента, чтобы расположить его таким образом, чтобы он анимировался вверх, а не вниз.

.animate () всегда анимируется от якоря.

0 голосов
/ 06 октября 2011

Вы можете задать ему полянку на половину от максимальной высоты (modalHeight) и добавить marginTop:"toggle" к вашей анимации: 

.animate({ height:modalHeight, marginTop:"toggle"})
...