jquery animation from inside ajax loaded div

Question

Hi There, I have a simple jquery animation on a div, which is inside a div, that has been loaded dynamically. Ie: User clicks link, drilldown.php loads up inside a div below. Then I have a bunch of divs inside that, one for each option.

Upon clicking the option, i want the div (or image inside the div, not fussed) to animate to approx 300px right and 300px up, but it seems like it is only moving inside the div, when it gets to the edge of the div, it starts again from the bottom of that div, it doesnt continue over the border.

I hope that makes sense, here is the jQuery code:

$("#option").click(function(){
 $("#option_img").animate({
width: "120%",
height: "120%",
left: "-=300px",
top: "-=300px",
opacity: 0.0,
      }, 15000 );
      });

Thanks in advance!

Ryan

EDIT:

This error is caused by the containing DIV being set to overflow:scroll; which is necessary because of the amount of results it is returning. Does anybody know how this can be avoided? I tried iframe as well, but that obviously does the same thing.

Answer 1

Kind of strange, the only thing that I can think of without having all your code is that your click function is actually never running and the minor movement is because of something else. Usually when you load something dynamically like you are those items need to be registered.

Take a look at Jquery Live .... see http://docs.jquery.com/Events/live

"Added in jQuery 1.3: Binds a handler to an event (like click) for all current - and future - matched element. Can also bind custom events."

Answer 2

i found the issue, it turns out that it was due to the containing div being set to overflow:scroll

if anyone has a way around this that would be great

Answer 3

This is surly not the answer of your problem , but this might help , U can use jQuery BlockUI Plugin .

Answer 4

How about once the option is clicked, clone the image and stick it in a div with no style, hide your original load div and then show the new image div where you want it to go. Use those animate effects to make it look like it starts where the original div is and move up right. Hope that makes sense. Should be very easy to do with jquery.

http://www.hieu.co.uk/blog/index.php/imageswitch/imageswitch-example/