CODEWITHSUNDEEP
jqueryhtml
user2536698
user2536698

Reputation:

Making a div visible when another div's margin is equal to 0px

Basically I have a div that moves horizontally when a right or left arrow is clicked. using the following jQuery:

$(".arrow_right").click(function(){
$(".movingdiv").animate({marginLeft: '+=-225px'}, 500);
});

$(".arrowcontainer_left").click(function(){
$(".movingdiv").animate({marginLeft: '+=225px'}, 500);
});

To ensure the moving div does not go off the screen, I would like the left arrow's css to change to:

  visibility:hidden;

when the moving div's margin-left is equal to 0px. And the same for the right arrow when the moving div's margin-left is equal to 675px (or three clicks)

Any help would be much appreciated.

Upvotes: 0

Views: 55

Answers (1)

Jay Shukla
Jay Shukla

Reputation: 5826

Do like this.

$(".arrowcontainer_left").click(function(){
    $(".movingdiv").animate({marginLeft: '+=225px'}, 500,function() { 
        if($(".movingdiv").css("margin-left") == "675px")
        {   // your stuff to hide
        }
    });
});

Upvotes: 1

Related Questions