Question

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.”