web-dev-qa-db-fra.com

jQuery animer de CSS "top" à "bottom"

Je cherche à animer un élément div d’une position haute absolue à une position inférieure absolue lors du chargement de la page.

La combinaison de CSS et du code jQuery ci-dessous ne peut rien déplacer:

CSS

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

jQuery

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

Merci de votre aide!

MODIFIER:

J'ai essayé de le changer en ceci (selon les suggestions de graphicdevine) mais toujours pas de cigare:

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

J'ai finalement trouvé une solution ...

En gros, vous passez de l’ancienne position top à une autre position relative à la variable top que vous calculez en prenant la hauteur window et en soustrayant (1) la position souhaitée de la bottom et de la hauteur de l’élément à animer . Ensuite, à la fin de l'animation, ajoutez un rappel pour modifier le css afin que l'élément soit ensuite positionné avec une valeur inférieure et une valeur auto supérieure.

Voici le script 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'
        });
    });

});

Vous pouvez le voir fonctionner dans ce jsFiddle

11
bravokiloecho

Vous pouvez définir la méthode top: auto avec .css, puis animer:

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

MODIFIER:

Vous pouvez jouer avec la taille du corps/de l’écran et convertir la position supérieure en position inférieure, puis animer la position souhaitée:

$(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);

})

Exemple: http://jsfiddle.net/reWwx/4/

5
davidmatas

Peut-être que cela aiderait?

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

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

Code complet:

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

2
Yan Yankowski

Vous pouvez définir la valeur inférieure actuelle via: css ('bottom'). Cela fonctionne pour moi (jQuery1.7.2):

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

EDIT: je devais partir rapidement, donc je n’ai pas pu finir, j’ai décidé d’utiliser jquery ui pour l’exemple (vous avez besoin du noyau):

<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/ (interrupteur à bascule modifié pour empêcher l'animation)

J'aime quelques autres suggestions aussi.

EDIT2: Juste testé dans IE ... ça marche bizarrement. Peut-être que vous devez le faire directement à cause d'un comportement étrange dans IE avec la classe de commutateurs Jquery UI.

EDIT3:

Ok, ça marche pour IE et FF ... Quelques notes cependant. Le +20 est de l'empêcher de sauter. Le test pour innerHeight de 0 est dans le cas où la hauteur n'est pas définie pour l'élément (ou le corps), donc si c'est dans un div qui est positionné, définissez la hauteur.

En outre, ce ne fonctionnait pas dans jsfiddle, mais travaillait sur une page Web régulière. Évitez, jsfiddle pour cela.

    <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>
0
craniumonempty

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

Ça devrait le faire. Vous aurez probablement besoin de reser la valeur 'top' à auto

EDIT

Pour animer, vous devez utiliser .animate ();

Essaye ça:

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

0
peduarte

Peut-être:

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

MODIFIER

Oui, cela va être plus compliqué qu'il n'y paraît. Vous devrez peut-être analyser sa position actuelle par rapport à son conteneur (en utilisant offset) et travailler à partir de là.

0
graphicdivine

Si vous voulez animer vous devriez faire:

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

Fiddle here: http://jsfiddle.net/nicolapeluchetti/xhHrh/

0
Nicola Peluchetti

Vous pouvez l'animer en utilisant ceci: Découvrez ce JSFiddle:

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