jQuery anime de CSS "top" à "bottom"

Je suis à la recherche d'animer un élément div à partir d'une absolue de la position absolue de la position inférieure sur le chargement de la page.

La combinaison de la CSS et de jQuery code ci-dessous ne parvient pas à déplacer quoi que ce soit:

CSS

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

jQuery

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

Merci pour votre aide!

EDIT:

J'ai essayé de le changer (comme par graphicdevine suggestions), 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);

source d'informationauteur bravokiloecho

11

J'ai finalement trouvé une solution...

Fondamentalement, vous animer à partir de l'ancien top position à une autre position par rapport à la top qui vous calculer en prenant le window de la hauteur et de la soustraction (1) la position désirée à partir de la bottomet (2) la hauteur de l'élément que vous souhaitez animer. Puis, à la fin de l'animation ajouter un rappel pour modifier le css de sorte que l'élément est alors en position avec une valeur du bas et un haut auto valeur

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 travailler dans ce jsFiddle

Vous pouvez définir supérieur:auto avec .méthode css et puis d'animer:

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

EDIT:

Vous pouvez jouer avec la taille du corps/de l'écran et de convertir de la position haute à la position basse, puis animer souhaité la position inférieure:

$(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/

Peut-être que ce serait aider?

$(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/

0

Si vous souhaitez animer que vous devez faire:
```
$("#line-three").animate({
    top: "500px",
    }, 1200);
```
Violon ici: http://jsfiddle.net/nicolapeluchetti/xhHrh/

Vous pouvez l'animer à l'aide de 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

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

Cela devrait le faire. Vous avez probablement besoin de reser le " top " de la valeur de l'auto

MODIFIER

Pour animer, vous devez utiliser .animate();

Essayez ceci:

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

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

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

EDIT: a partir rapidement afin de ne pas arriver à terminer, j'ai décidé d'utiliser jquery ui pour l'exemple (vous avez besoin de base):

<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/ (modifié interrupteur à bascule pour éviter d'animation)

J'ai comme quelques autres suggestions.

EDIT2: Viens de tester sous IE... il fonctionne bizarrement. Peut-être ne droite en raison d'un comportement étrange dans IE avec Jquery UI commutateur de classe.

EDIT3:

Ok, j'ai eu ce travail pour IE et FF... Quelques notes. Le +20 est pour l'empêcher de sauter. Le test pour innerHeight de 0 est dans le cas où la hauteur n'est pas défini pour l'élément (ou le corps), donc si c'est dans une div qui est placé, puis régler la hauteur.

Aussi, ce n'a pas de travail dans jsfiddlemais il a travaillé régulièrement sur une page web. Éviter, 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>

Vous pouvez définir le fond actuel de la valeur via: css('bas'). Cela fonctionne pour moi (jQuery1.7.2):

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

Vous devez vous connecter pour publier un commentaire.