CODEWITHSUNDEEP
jquery
user1534664
user1534664

Reputation: 3418

JQuery make image invisible if outside div

I'm trying to create a slider in JQuery. I have two images on top of eachother inside a div. When the right button is pressed I want to make the underlying image start left to it and slide it to the right on top of the other image. I use this code for that:

var position = $("#IMAGE1").position();
var width = position.left-1050;
$("#IMAGE1").css('left', width);
$("#IMAGE1").animate({"left": "+=1050px"}, "slow");

Now I only want the part of the image visible that is INSIDE the div, not when its outside (it would look really sloppy because the div has a border). Question is, how?

Upvotes: 1

Views: 484

Answers (1)

random_user_name
random_user_name

Reputation: 26160

Be sure that the containing div has the following css styles:

position: relative;
overflow: hidden;

That should do the trick.

Upvotes: 2

Related Questions