2

I originally started out this question with "what is jQuery, and how does it work", in terms of all that fancy animation, effects, slideshow plugins, etc. I was uncertain as to how JQuery does all that fancy stuff. But after reading around on the internet, I am happy to acknowledge that jQuery is basically a "JavaScript library", and by that, I think it means that jQuery is pure text, of JavaScript code, consisting of public methods, functions, constants etc, with the idea that calling these simple methods or functions can replace loads of JavaScript code, and that its has a nice consistent feel to it.

So am I right in saying that all that fancy animation, effects etc are not "actually" achieved by JavaScript/jQuery? They are achieved by using CSS3? And CSS3 is a style sheet language which the browser can understand, and has the capabililites of carrying out those style sheet instructions?

Very fuzzy and ambiguous question, I know, but just trying to get my head round how you get those amazing jQuery animations etc.

  • 2
    Just because the layer of stuff you use has a second layer underneath it, doesn't mean that the layer you use doesn't do anything. – mjfgates Jul 12 '14 at 18:37
1

Yes and no. jQuery uses dom-manipulation using the css-attributes to animate html-elements.

You can see how the .animate()-function works quiet good when you use the step-function:

$( "div" ).animate({
    'font-size': "26px"
}, {
  step: function( now, fx ) {
    console.log(fx);
  }
});

The jQuery.fx.prototype contains the information of the current state of the animation:

  • elem: the element which is animated
  • prop: The property of the html-tag which is animated
  • now: the current state of the property
  • start/ end: the start and end values of the animated property
  • unit: the unit of the property

Some value might be familiar to css, in fact, yes jQuery uses the CSS values to change the look of an animated element.

If you look at the value now of the fx-object you can see the calculated values from jQuery. So jQuery calculates the values between the start and end -values to provide an animation. But I can't give an answer on how the calculation works, that's by now to deep for me.

In conclusing this means jQuery calculates it's own values to animate the elements. But, if I'm right, there are no transitions of CSS3 used at the moment.

Demo (Just open your console and start the fiddle)

I hope I could explained it clear enough to increase your understanding.

  • 1
    This answer has a lot more detail than mine, but in direct answer to the question given: No. JQuery does the main body of the work itself, and uses basic CSS2 properties to apply the changes. There are animation properties in CSS3 that could do something similar, but I would guess JQuery doesn't use them out of the chance that a CSS-based animation might not run in exactly the same way. – Katana314 Mar 13 '15 at 18:07
  • @Katana314 yes you're right, might not be get fully clear in my answer, but I think you summed this up very well. – empiric Mar 14 '15 at 1:47
-3

For normal manipulation of styling change or adding new CSS class. Any JavaScript library can use the core DOM elements navigation. For animations and themes, jquery UI is used. http://api.jqueryui.com/theming/css-framework/

-3

You Can also use animate function which available in JQuery Plugin. $("#divname").animate({top:"",left:""},speedtime); And also we have more option in animate which specify about animation type like swing or linear etc..

protected by gnat Feb 20 '17 at 21:09

Thank you for your interest in this question. Because it has attracted low-quality or spam answers that had to be removed, posting an answer now requires 10 reputation on this site (the association bonus does not count).

Would you like to answer one of these unanswered questions instead?

Not the answer you're looking for? Browse other questions tagged or ask your own question.