Question

I’m new to jQuery, and I’m trying to create the most basic example of animation. The aim is, using percentages of the div the text is contained within in order to account for different screen sizes if that makes sense?

Here is the jQuery I started with:

$(document).ready(function() {
    $('#exampleDiv').animate({'marginLeft': '+=125px'}, 2000);
});

Which works but doesn’t account for different screen sizes. So I wanted to switch it something percentage based.

I tried: {padding-left:58%} and {left:58%} but these don’t work for me either because I would like this to be based on a div this is contained within if that makes sense? So I would like to learn how to base the animate value on the percentage of the div container. And also how to set the font size based on this as well.

<div id="container" width="300px" height="300px">
   <div id="exampleDiv">Text to slide in</div>
</div>

So again I am just learning this, if there is a better approach I welcome and appreciate all advice, examples etc.

Thanks as always!

Answer 1

As Adeneo mentioned you can use % for the CSS property, I’ve done it in a very similar way.

jsfiddle

This grabs the width of #container, stores it in a variable and the following is used to work out the percentage: .width() / 100 * 50;, change * 50 to whatever number you want the percentage to be.

This has the added function of being able to refer back to it for other elements you may want to also style.