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

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

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

CSS

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

JQuery

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

Благодарим за помощь!

EDIT:

Я попытался изменить его на это (как и в случае с графическими подсказками), но все равно не сигары:

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

Ответ 1

В итоге я придумал решение...

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

Здесь jQuery script:

$('#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

Ответ 2

Вы можете установить верх: 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/

Ответ 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/

Ответ 4

EDIT: пришлось быстро уйти, так что мне не удалось закончить, я решил использовать 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 UI.

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>

Ответ 5

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

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

ИЗМЕНИТЬ

Чтобы оживить, вам нужно использовать .animate();

Попробуйте следующее:

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

Ответ 6

Возможно:

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

ИЗМЕНИТЬ

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

Ответ 7

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

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

Заклинание здесь: http://jsfiddle.net/nicolapeluchetti/xhHrh/

Ответ 8

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

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

Ответ 9

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

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