After some searching on the google I found that this (left: '+=400px' ) means position relative .... but relative to what. The statement came within this HTML page : <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Using Multiple Callbacks</title> <link href="http://localhost/misc/_css/site.css" rel="stylesheet"> <style> #figure { position: relative; width: 400px; margin: 0 auto; height: 300px; overflow: hidden; } #photo { position: absolute; left: -400px; } #caption { position: absolute; width: 340px; background-color: black; bottom: 10px; left: 24px; padding: 5px; border: 1px solid white; display: none; } </style> <script src="http://localhost/misc/_js/jquery-1.7.2.min.js"></script> <script> $(document).ready(function() { $('#photo').animate( { left: '+=400px', }, 1000, function() { // first callback function $('#caption').fadeIn(1000, function() { // second callback function $('#photo, #caption').fadeOut(1000); } // end second callback ); // end fadeIn } // end first callback function ); // end animate }); </script> </head> <body> <div class="wrapper"> <div class="header"> <p class="logo">JavaScript <i>&</i> jQuery <i class="mm">The<br>Missing<br>Manual</i></p> </div> <div class="content"> <div class="main"> <h1>Using Multiple Callbacks with animate()</h1> <div id="figure"><img src="http://localhost/misc/_images/pencils.jpg" width="400" height="300" alt="pencils" id="photo"> <p id="caption">Pencils!!!!!!</p></div> </div> </div> <div class="footer"> <p>JavaScript & jQuery: The Missing Manual, by <a href="http://sawmac.com/">David McFarland</a>. Published by <a href="http://oreilly.com/">O'Reilly Media, Inc</a>.</p> </div> </div> </body> </html> HTML:
Technically, the outer div (with the id "figure") is the one having a relative positioning. The inner image, with id "photo", which is the one being animated, have position: absolute, and the relative attribute on the outer div means its position is absolute to the outer div. (If the #figure-div didn't have position: relative, the absolute positioning on the image would be relative to the page itself, not the containing div).
Thanks a lot @PoPSiCLe for the detailed explanation. I will try to understand the ramifications here. But it is still difficult to understand.
What it does is this: in the CSS in the top of the file, the #photo inside #figure is hidden from view, by setting the left-margin to -400px - then the animate-action in the jQuery nullifies that value, by adding 400 to the existing value - and showing it (I'm assuming that's what happens, I haven't tested it myself, but from the code, that seems to be what it's doing).
I think this is the most excellent clarification sent so far. I think the same thing can be done with a simpler approach... for example the way 'animate' explained by the w3schools.com site. However in this example I am still adamant to understand the rest of it. I am further experimenting with the page codes.
It's also an excellent example of what halfwit idiotic bloated bullshit jQuery is, particularly for something as simple as a slide-in and fade-out which we don't need scripting to do anymore other than MAYBE as the trigger to start the event with a single class swap. But sure, let's use a 100k library with jerky slow animations to do 4 lines of scripting and 6 lines of CSS' job. Do yourself a favor, and forget that mouth-breathingly stupid bull known as jQuery even exists, PARTICULARLY for "gee ain't it neat" animooted manure. Your websites and your visitors will thank you for it. Hot and trendy buzzword status doesn't actually mean it does anything good or useful. Of course with the H1 doing a H2's job, P doing a H1's job, and general "I can haz intarnets" markup it's obvious the writer of "The Missing Manual" -- one David Sawyer McFarland -- doesn't know enough HTML or CSS to have been writing a book on web development in the first damned place... But that goes hand in hand with the fact that most people DUMB ENOUGH to fall into the trap of using the ridiculously stupid single-digit IQ nonsense known as jQuery generally have the same shortcoming -- an ignorance of HTML, CSS, accessibility, design and usability that leaves them woefully ill-equipped and pathetically unqualified to make sane and rational choices about building a website. Developers are dumber for nonsense like this even existing.