Keskustelu: Nettisivujen teko: jQuery-animointi

Tarkoitus olisi liikutella div-elementtiä jQueryn avulla. Elementtiä liikutellaan up-ja down-napeilla. Tällä hetkellä elementti liikkuu, mutta sille pitäisi asettaa tiettyjä rajoja.

- Jos #contentin korkeus on alle 600px, elementti ei liikahdakkaan.
- Jos #contentin korkeus on yli 600px, niin sille lasketaan maksimaalinen top-arvo vähentämällä #wrapin korkeudesta #contentin nykyinen korkeus.
- Jos #contentin top-arvo on nolla, niin down-nappi ei plussaa top-arvoa.

Olisin kovin kiitollinen, jos joku osaisi neuvoa minua pulmassani.

<a id="up" href="#">Up</a>
<div id="wrap">
<div id="content">
</div>
</div>
<a id="down" href="#">Down</a>

$("#up").click(function(){
  $("#content").animate({"left": "-=50px"}, "slow");
});

$("#down").click(function(){
  $("#content").animate({"top": "+=50px"}, "slow");
});

On jo aikaa kun itse näiden kanssa painin, mutta eikös jQueryssä saa elementtien koon aika triviaalisti tietoon (.width()/.height() tjsp)?

Sain jo hieman ratkaistua. Nyt content-elementti ei liikahdakkaan, jos se on korkeudeltaan pienempi kuin wrappi.

Vielä pitäisi saada haisteltua elementin absoluuttinen sijainti, ja tehdä edellä mainittuja toimenpiteitä.

<script type="text/javascript">
$(document).ready(function(){
$("#up").click(function(){
  if
  ($("#content").height() < $("#wrap").height()){
  return false;
  }
  else if
  ($("#content").animate({"top": "-=50px"}, "slow"));
});

$("#down").click(function(){
  if
  ($("#content").height() < $("#wrap").height()){
  return false;
  }
  else if
  ($("#content").animate({"top": "+=50px"}, "slow"));
});
</script>