Question

I’ve tried editing the JS for the animation function in Zoomer.js, here’s the code:

$('.title').animate({marginLeft:'2px',marginTop:'65px'},d.speedTitle).css({'z-index':'10','position':'absolute','float':'none'})}}},function(){$(this).css({'z-index':'0'});
$(this).find('img').removeClass("hover").stop().animate({marginTop:'0',marginLeft:'0',top:'0',left:'0',width:'100px',height:'100px',padding:'0px'},d.speedRemove);$(this).find('.title').remove()})}}})(jQuery);

I’d like for the little red box to animate from the bottom up rather than from the top to bottom. I thought it would be as simple as changing marginTop:’65px’ to marginBottom:’35px’ but that’s not doing the trick.

I’ve read that using position:absolute renders marginBottom ineffective, but if I use any other position it breaks the effect. If this is correct, is there a work-around? If this is not correct can you tell me where I’m going wrong?

I appreciate everyone’s time and input.

Thank you!

Answer 1

Since your element is absolutely positioned, you can animate its bottom property:

$(".title").animate({
    marginLeft: "2px",
    bottom: "35px"
}, d.speedTitle);