jquery: novice to ninja--animate() p. 52?

**7stud** · Nov 10, 2011 12:11

The text says:

Code:

$('p').animate(
{
  padding: '20px',
  fontSize: '30px'
}, 2000);

This code will animate all paragraphs on the page, changing the padding from its initial state to 20px….

However, using jquery 1.6.2 the initial state of the p tags seems to be ignored, and the animation starts at 0 padding. Below is an example showing what I mean. If the book were correct, then one p tag should shrink and one p tag should grow--but that is not what happens.

Code:

<!DOCTYPE html>
<html>
  <head>
    <title>jquery</title>
    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript" src="jquery_ujs.js"></script>
    <script type="text/javascript">
     $(document).ready(function(){
        alert("look at the padding");

        $('p').animate({
          padding: '15px',
          fontSize: '30px'
        }, 4000);

      });
                
    </script>

    <style>
      #one {
        padding: 25px;
        background-color: blue;
        border: solid 5px;
      }
      #two {
        padding: 5px;
        background-color: blue;
        border: solid 5px;
      }
    </style>

  </head>

  <body>
    <p id='one'>Home</div>
    <p>Filler</p>
    <p id='two'>About</div>
  </body>
</html>

**ralph.m** · Nov 10, 2011 17:53

I tested their code using jQuery7 and it worked fine. Are you using their example code or an experiment of your own? I couldn't see your code in their example files.

**7stud** · Nov 11, 2011 11:30

I tested their code using jQuery7 and it worked fine.

Have you ever read a question that said, "This code doesn't work for me, what is the matter?" Your answer is just as obtuse. What does "it worked fine" mean? Did you run my example? What did you see? Did the animation begin at the p tag's initial state or did the animation begin with a padding of 0?

You seem unable to comprehend the issues I point out in my posts. If you can't understand the issues being raised, there is no point in responding to a question. Either ask for clarification or don't respond at all. Personally, I would be embarrassed to post responses like you have been posting. Are you in some race to get to 10,000 posts or something?

**ralph.m** · Nov 11, 2011 20:13

Yes, sorry, I was too hasty. I tested the book's code (at chapter_03/01_animating_css/index.html) and it seemed to work as expected with both jQuery 1.4 and 1.7, but after adding a background color to the <p> elements, it seems that even in the book's example the initial CSS is wiped before the animation happens.

On the next page of the book, it's implied that initial CSS values get wiped unless you make a modification to the script. So, instead of using padding: '15px', using padding: '+=15px' adds 15px to the original value that was set. There is an equivalent setting for removing padding from the current value: padding: '-=15px'.

I tested that on both the book's example page and yours, and it worked, except that I couldn't get the word 'padding' on its own to work. It only worked if I used paddingLeft, paddingRight etc. Darned if I know why. This is what I came up with, anyhow, for what it's worth:

Code:

<!DOCTYPE html>
<html>
  <head>
    <title>jquery</title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
    <script type="text/javascript">
     $(document).ready(function(){

		$('p#one').animate({
			paddingLeft: '-=5px',
			paddingRight: '-=5px',
			paddingTop: '-=5px',
			paddingBottom: '-=5px',
			fontSize: '30px'
			}, 4000);


		$('p#two').animate({
			paddingLeft: '+=15px',
			paddingRight: '+=15px',
			paddingTop: '+=15px',
			paddingBottom: '+=15px',
			fontSize: '30px'
			}, 4000);
      });
                
    </script>

    <style>
      #one {
        padding: 25px;
        background-color: blue;
        border: solid 5px;
      }
      #two {
        padding: 5px;
        background-color: blue;
        border: solid 5px;
      }
    </style>

  </head>

  <body>
    <p id='one'>Home</div>
    <p>Filler</p>
    <p id='two'>About</div>
  </body>
</html>

Anyhow, yes, I admit I'm a noob at this, but it's fun to have a try. I'll get out of your way in future and leave this to the experts.

**7stud** · Nov 13, 2011 16:28

On the next page of the book, it's implied that initial CSS values get wiped unless you make a modification to the script. So, instead of using padding: '15px', using padding: '+=15px' adds 15px to the original value that was set.

No, the += syntax does not imply that the other syntax won't honor the initial state of an element. All the += syntax implies is that you don't have to know or calculate the final size/position of the element.

This is just another example of how bad the book is. The book states something that is false, and there is nothing in the errata.

Anyhow, yes, I admit I'm a noob at this, but it's fun to have a try. I'll get out of your way in future and leave this to the experts.

No worries.

User Tag List

Thread: jquery: novice to ninja--animate() p. 52?

Thread Tools

Display

jquery: novice to ninja--animate() p. 52?

Bookmarks

Bookmarks

Posting Permissions