JQuery анимировать от CSS "сверху" до "снизу"

Question

Я хочу анимировать элемент div из абсолютной верхней позиции в абсолютную нижнюю позицию при загрузке страницы.

Комбинация кода CSS и кода jQuery ниже ничего не может переместить:

CSS

#line-three {
    position:absolute;
    width:100%;
    left:0px;
    top:113px;
}

JQuery

 $("#line-three").animate({
    bottom: "100px",
    }, 1200);

Спасибо за вашу помощь!

EDIT:

Я пытался изменить это на это (согласно советам graphicdevine), но все еще без сигар:

var footerOffsetTop = $('#line-three').offset().bottom;
  $('#line-three').css({position:'absolute',top:'',bottom:footerOffsetTop})
  $("#line-three").delay(100).animate({
    bottom: '100px',
    }, 1200);

Answer 1

Я в конечном итоге нашел решение ...

По сути, вы анимируете из старой позиции top в другую позицию, также относительно top, которую вы рассчитываете, взяв высоту windowи вычитая (1) желаемую позицию из bottom и (2) высоту элемента, который вы хотите анимировать.Затем в конце анимации добавьте функцию обратного вызова для изменения CSS, чтобы элемент находился с нижним значением и верхним значением auto

Вот сценарий jQuery:

$('#click').click(function () {

    var windowHeight = $(window).height();
    var lineHeight = $('#line').height();
    var desiredBottom = 100;

    var newPosition = windowHeight - (lineHeight + desiredBottom);

    $('#line').animate({top:newPosition},1000,function () {
        $('#line').css({
            bottom: desiredBottom,
            top: 'auto'
        });
    });

});

Вы можете видеть, как это работает в этом jsFiddle

Answer 2

Вы можете установить top: auto с помощью метода .css и затем анимировать:

$(document).ready(function(){
   $("#line-three").css({top:'auto'});   
   $("#line-three").animate({bottom:'100px'}, 200)   
})

EDIT:

Вы можете играть с размером тела / экрана и конвертировать верхнюю позицию в нижнюю позициюи затем анимируйте в нужную нижнюю позицию:

$(document).ready(function(){
  var bodyHeight = $('body').height();
  var footerOffsetTop = $('#line-three').offset().top;
  var topToBottom = bodyHeight -footerOffsetTop;

  $('#line-three').css({top:'auto',bottom:topToBottom});
  $("#line-three").delay(100).animate({
    bottom: '100px',
  }, 1200); 

})

Пример: http://jsfiddle.net/reWwx/4/

Answer 3

Может быть, это поможет?

$(document).ready( function() {
    var div = jQuery("#dvVertigo");

    div.animate({
           left: '0',    
                top: '+=' + ($(window).height()-20)               
            }, 5000, function () {
                // Animation complete.
            });
});

Полный код:

http://jsfiddle.net/yyankowski/jMjdR/

Answer 4

Вы можете установить текущее нижнее значение с помощью: css ('bottom').Это работает для меня (jQuery1.7.2):

$('#line-three').css({bottom:$('#line-three').css('bottom'), top:'auto'});
$('#line-three').animate({ bottom: position }, 250);

Answer 5

Вы можете анимировать это, используя это: Проверьте это JSFiddle:

$('#button').click(function(e){ // On click of something
    e.preventDefault(); // Prevent the default click aciton
    $("#line-three").animate({
        top: "300px",
    }, 1200);
});

Answer 6

Если вы хотите оживить, вы должны сделать:

$("#line-three").animate({
    top: "500px",
    }, 1200);

Скрипка здесь: http://jsfiddle.net/nicolapeluchetti/xhHrh/

Answer 7

Возможно:

 $("#line-three").animate({position:'absolute',top:'auto',bottom:'100px'},1200)

EDIT

Да, это будет сложнее, чем кажется на первый взгляд. Возможно, вам придется проанализировать его текущую позицию относительно контейнера (используя offset) и работать оттуда.

Answer 8

$("#line-three").css({position:'absolute',top:'auto',bottom:'100px'})

Это должно сделать это.Вероятно, вам нужно зарезервировать верхнее значение для auto

EDIT

Для анимации необходимо использовать .animate ();

Попробуйтеэто:

$("#line-three").animate({position:'absolute',top:'auto',bottom:'100px'}, 400)

Answer 9

РЕДАКТИРОВАТЬ: пришлось уйти быстро, так что не до конца, я решил использовать jquery UI для примера (вам нужно ядро):

<html><head>
<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.16.custom.min.js"></script>
<style>
#line_three { width:100%; }
.line3_top {
    position:absolute;
    top:113px;
    left:0px;
}
.line3_btm {
    position:absolute;
    bottom:100px;
    left:0px;
}
</style>
<script type="text/javascript">
    var topbtm = true;
    $(document).ready(function(){
        $("#line_three").mouseenter(function(){
            if ( topbtm ) {
                $("#line_three").switchClass("line3_top","line3_btm",400);
            } else {
                $("#line_three").switchClass("line3_btm","line3_top",400);
            }
            topbtm = !topbtm;
        });
    });
</script>
</head><body>
<div id="line_three" class="line3_top">
    hello;
</div>
</body></html>

http://jsfiddle.net/syVzK/1/ (изменен тумблер для предотвращения чрезмерной анимации)

Мне нравятся и другие предложения.

EDIT2: только что протестировано в IE ... это работает странно. Возможно, придется поступить прямо из-за странного поведения в IE с классом переключателей пользовательского интерфейса Jquery.

EDIT3

Хорошо, у меня это работает для IE и FF ... Хотя некоторые замечания. +20 не дает ему прыгать. Тест для innerHeight, равный 0, выполняется в том случае, если высота не установлена ​​для элемента (или тела), поэтому, если он находится в элементе div, который расположен, то установите высоту.

Кроме того, этот не работал в jsfiddle , но работал на обычной веб-странице. Избегайте, jsfiddle для этого.

    <script type="text/javascript">
var topbtm = 1,top3=113,btm3=100;
$(document).ready(function(){
    $("#line_three").mouseenter(function(){
        var ih = $(this).offsetParent().innerHeight();
        if (ih==0){ih=$(document).innerHeight();}
        if ( topbtm==1 ) {
            topbtm=-1;
            $("#line_three")
                .animate({"top":(ih-(btm3+20))}
                         ,500
                         ,function(){
                             $(this).css({"top":"auto","bottom":btm3});
                })
            topbtm=0;
        } else if ( topbtm==0 ) {
            topbtm=-1;
            $("#line_three")
                .animate({"bottom":(ih-(top3+20))}
                         ,500
                         ,function(){
                             $(this).css({"bottom":"auto","top":top3});
                })
            topbtm=1;
        }
    });
});
    </script>