CODEWITHSUNDEEP
javascriptjquery
user1281720
user1281720

Reputation: 39

How to animate a div only if it's at a specific position?

Is there a way to animate (slide down) a div; for example, if it's only at a certain position on the page?

For example, there are four divs that all have the same class .ALLCONTENT, but when a button (which has class .BUTTONS) is clicked only the div that's at 30 px from the top will animate downwards, the rest will remain in the same place.

Basically, slide down a div to a certain position, if that div's in that position already it wont slide further down; the problem I'm having now with

$(".BUTTONS").click(function(){
    $(".ALLCONTENT").animate({"top":"+=558px"}, 250, 'linear');
});

Upvotes: 1

Views: 121

Answers (3)

ahoff
ahoff

Reputation: 1334

$(".BUTTONS").click(function(){  
    $(".ALLCONTENT").each(function(i){
        if($(this).css("top")=="30px"){
            $(this).animate({"top":"558px"}, 250, "linear");
        }
    })
});

Upvotes: 0

Tobias Krogh
Tobias Krogh

Reputation: 3932

use 

if($(".ALLCONTENT").offset().top === 20) {
    //Do something
}

if you want check its absolute position to the document / body

and 

if($(".ALLCONTENT").css("top") === "20px") {
    //Do something
}

or 

if($(".ALLCONTENT").position().top === 20) {
    //Do something
}

if you want check its relative position

Upvotes: 2

Jonny Burger
Jonny Burger

Reputation: 921

If it is not possible to assign id's (even though I can not image that), use this:

if($(".ALLCONTENT").css("top") == "20px") {
//Do something

}

Upvotes: 0

Related Questions