jQuery animato da CSS "top" a "bottom"

Sto cercando di animare un elemento div da una posizione superiore assoluta a una posizione inferiore assoluta sul caricamento della pagina.jQuery animato da CSS "top" a "bottom"

La combinazione di CSS e codice jQuery sotto non riesce a spostare nulla:

CSS

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

jQuery

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

Grazie per il vostro aiuto!

EDIT:

Ho provato a cambiare a questo (come per i suggerimenti di graphicdevine), ma ancora non sigaro:

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

fonte

2011-12-15 bravokiloecho

ok, ha ottenuto il codice. Scusa non ero lì prima, ma ho dovuto dividere. – craniumonempty

Sì, quello script ha funzionato per FF, ma non è stato testato in IE. Ne ho creato un altro che non usa jquery ui, ma ho dovuto fare qualche ritocco per farlo funzionare. – craniumonempty

offset(). Bottom non esiste, offset() restituisce solo le proprietà superiore e sinistra. – daniloquio

Alla fine ho trovato una soluzione ...

Fondamentalmente si anima dalla vecchia posizione top in un'altra posizione anche rispetto allo top che si calcola prendendo l'altezza window e sottraendo (1) la posizione desiderata da bottom e (2) l'altezza dell'elemento che si desidera animare. Poi, alla fine dell'animazione aggiungere un callback per modificare il CSS in modo da l'elemento è poi la posizione con un valore inferiore e un valore superiore auto

Ecco lo 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' 
     }); 
    }); 

});

You can see it working in this jsFiddle

fonte

2012-01-29 17:27:36 bravokiloecho

EDIT: ha dovuto lasciare in fretta in modo da non arrivare a finire, ho deciso di usare jQuery UI per l'esempio (è necessario core):

<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/ (interruttore a levetta cambiato per evitare sopra animazione)

012.351.641.061.

Mi piacciono anche altri suggerimenti.

EDIT2: appena testato in IE ... funziona in modo strano. Forse devo fare dritto a causa di un comportamento strano in IE con la classe switch dell'interfaccia di Jquery.

Edit3:

Ok, ho ottenuto questo lavoro per IE e FF ... Alcune note però. Il +20 è di impedirgli di saltare. Il test per innerHeight di 0 è nel caso in cui l'altezza non è impostata per l'elemento (o il corpo), quindi se è in un div che è posizionato, quindi impostare l'altezza.

Inoltre, questo non ha funzionato in jsfiddle, ma ha funzionato su una normale pagina web. Evita, jsfiddle per questo.

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

fonte

2011-12-15 10:18:43 craniumonempty

Questo non produce un'animazione, solo un salto. – bravokiloecho

@negatron Ho funzionato (edit3) in ie e ff, ma non ho potuto ottenere offsetParent() per funzionare in jsfiddle, quindi deve essere testato senza di esso. Non sei sicuro di cosa lo stia buttando fuori, ma non sei disposto a rintracciarlo al momento. – craniumonempty

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

Che dovrebbe farlo. Probabilmente è necessario riser il valore 'top' per l'auto

EDIT

Per animare, è necessario utilizzare .animate();

Prova questo:

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

fonte

2011-12-15 10:20:10 peduarte

Quasi lo fa, ma piuttosto che creare uno slide-down animato salta improvvisamente in basso ... – bravokiloecho

Guarda la mia modifica – peduarte

La tua modifica ora equivale alla risposta di graphicdevine (sopra). E questo purtroppo non funziona. – bravokiloecho

Possibilmente:

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

EDIT

Sì, questo sta per essere più difficile di quanto non sembri. Potrebbe essere necessario analizzare la posizione corrente relativa al suo contenitore (usando offset) e lavorare da lì.

fonte

2011-12-15 10:21:08 graphicdivine

Hmm. Questo non sembra fare nulla ... – bravokiloecho

Grazie per il suggerimento. Lo esaminerò.Qualche ovvio suggerimento su come iniziare ad usare l'offset? – bravokiloecho

vedi la mia modifica. eventuali suggerimenti? – bravokiloecho

Se si desidera animare si dovrebbe fare:

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

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

fonte

2011-12-15 10:22:13

Dovresti leggere di nuovo la domanda;) – Kimtho6

è possibile animare utilizzando questo: Check out this JSFiddle:

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

fonte

2011-12-15 10:25:46 Anil

Ma questa posizione non è relativa alla parte inferiore della pagina no? – bravokiloecho

Questo animerà il div 300px dalla sua posizione assoluta, dove mai è. Quindi in questo caso, 300 px dalla parte superiore della pagina. Quindi, se volessi spostarlo di 100 px, lo spostassi di 113px + 100px, mi spiace, non capisco cosa intendi fare ora. – Anil

Sì, è difficile! Ma grazie per il tuo tempo. – bravokiloecho

È possibile impostare in alto: auto con il metodo .css e quindi animato:

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

EDIT:

Si può giocare con dimensioni del corpo/schermo e convertire posizione superiore alla posizione inferiore e quindi animate nella posizione desiderata in basso:

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

})

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

fonte

2011-12-15 10:43:28 davidmatas

Ma questo lo scatta verso il basso e lo anima da lì. Sto cercando di spostarsi dall'alto verso il basso ... – bravokiloecho

Dall'alto verso il basso dello schermo? O con rispetto l'elemento relativo che lo contiene? – davidmatas

Per quanto riguarda lo schermo. – bravokiloecho

È possibile impostare il valore inferiore corrente tramite: css ('in basso'). Questo funziona per me (jQuery1.7.2):

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

fonte

2013-06-11 10:45:34

Forse questo sarebbe di aiuto?

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

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

codice completo:

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

fonte

2013-06-13 08:10:50

jQuery animato da CSS "top" a "bottom"

risposta

Problemi correlati