#1
  1. No Profile Picture
    Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Mar 2008
    Posts
    667
    Rep Power
    38

    JQuery animate margin or padding


    OK,
    I've tried a couple of different approaches to animate the margin or padding of an image that's supposed to fill the screen when clicked.

    The problem is that the margin animation is immediate and needs to happen over a couple of seconds.

    Here's my code:
    Code:
    <script type="text/javascript">
    	/*<![CDATA[*/
    	$("document").ready(function(){
    $('#clickme').click(function() {
    $('#circle').animate({
    height: '2400px',
    width: '2400px',
    marginTop:'-500px',
    marginLeft:'-500px'
    //background-color:'#dad24e'
    }, 5000, function() {
    // Animation complete.
    });
    });
    });
    </script>

    Here's the test site:test site for jQuery animation


    I tried:: "margin-top", and "margin-left," but that didn't work with jQuery.

    Also, I need the image to expand without expanding the browser window.

    If anyone can help with these issues, that would be wonderful.
    thanks!
    Last edited by lelales; March 2nd, 2013 at 06:50 PM.
  2. #2
  3. No Profile Picture
    Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Mar 2008
    Posts
    667
    Rep Power
    38

    OK, figured it out


    Instead of using "margins" I used padding and added a padding style to the CSS.

    Now it works just fine.

    thanks

IMN logo majestic logo threadwatch logo seochat tools logo