jQuery animation

Status
Niet open voor verdere reacties.
N

Naughtygirl

Gebruiker
Lid geworden
17 jan 2009
Berichten
174
Ik probeer een div te animeren die, van een top 0 naar bv top 100 gaat. Dit gaat prima, maar hij moet weer terug naar top 0 zodra ik ergens in het document klik. Dit laatste krijg ik niet voor elkaar.
Mijn html:
HTML: 
<button>Start Animation</button>
<div class="box"></div>

Mijn CSS:
HTML: 
button {
      position: absolute;
      top: 7px;
   }
   .box {
      width: 50px;
      height: 50px;
      position: absolute;
      top: 40px;
      background-color: #000;
   }

Mijn jquery:
Code: 
$(document).ready(function(){
    $("button").click(function(){
        $(".box").animate({
            top: '200px'
        });
    });
});

Kan iemand mij helpen?
 
Het handigste is om een extra class toe te voegen zodat je weet welke box verplaatst is.

[js]
$(document).ready(function(){
$("button").click(function(){
$(".box").animate({
top: '200px'
}).addClass('animated');
});
});[/js]

Vervolgens kun je die class weer gebruiken in je selector :)
[js]
$(document).ready(function(){
$("button").click(function(){
$(".box").animate({
top: '200px'
}).addClass('animated');
});

$('body').on('click', function() {
$(".box.animated").css('top', 0).removeClass('animated');
});
});[/js]
 
Ik heb het getest, maar hij gaat niet terug omhoog. Hij springt ff omhoog en gaat dan gelijk weer terug omlaag.
 
Blijkbaar ging het e.e.a. tegelijk (Bij het klikken op de button werkt meteen de "animated" class er al weer afgehaald)

Aangepaste variant:
[js]
$(document).ready(function(){
$("button").click(function(e){
e.stopPropagation();
$(".box").animate({
top: '200px'
}, 500, function() {
$(this).addClass('animated');
});
});

$('html').on('click', function() {
$(".box.animated").css('top', '').removeClass('animated');
});
});
[/js]
http://jsfiddle.net/jpuv3sdr/

Aangezien jQuery een Javascript library is, heb ik deze vraag verplaatst naar die sectie
 
Laatst bewerkt:
Ja, nu werkt ie! En om hem perfect af te maken, zou de div ook zo omhoog moeten gaan, als dat ie naar beneden gaat, i.p.v. bam omhoog.

Is het ook mogelijk dat bovenstaande Javascript pas wordt uitgevoerd in een bepaalde schermresolutie?
 
Laatst bewerkt door een moderator:
Naughtygirl zei:
Ja, nu werkt ie! En om hem perfect af te maken, zou de div ook zo omhoog moeten gaan, als dat ie naar beneden gaat, i.p.v. bam omhoog.
Klik om te vergroten...
Dat is een kwestie van opnieuw de animate-functie gebruiken in plaats van css ;)
Naughtygirl zei:
Is het ook mogelijk dat bovenstaande Javascript pas wordt uitgevoerd in een bepaalde schermresolutie?
Klik om te vergroten...
Hoe zou dat dan precies moeten werken volgens jou? Het wordt nu uitgevoerd door interactie (dmv een click)
 
mmmmmm ja, das een goeie vraag :D:D:D:eek:

Het is me gelukt om de beweging omhoog te animeren.
 
Laatst bewerkt:
Status
Niet open voor verdere reacties.
Steun Ons

Nieuwste berichten

Terug
Bovenaan Onderaan