CODEWITHSUNDEEP
javascriptjqueryhtmlbrowser
user2609980
user2609980

Reputation: 10474

How is it possible for jQuery to animate parts of websites?

While I was browsing the web to learn more about jQuery and JavaScript I realized I have no idea how they work. Take for example the slideDown() method:

$("button").click(function(){
  $("p").slideDown();
});

When a button is clicked it hides all p elements. How does the browser know what to do and how to do it when it reads this code?

jQuery is a library that is written in JavaScript. But does it do things that can also be done in JavaScript? Or did the creators of jQuery also talk with the people of web browsers to implement more functionality?

In a nutshell, my question is on a somewhat more fundamental level: how do browsers do what they do and how can code make them do it?

/edit The article "How browsers work: Behind the scenes of modern web browsers" shines some nice philosophical light on this topic.

Upvotes: 1

Views: 67

Answers (5)

Captain John
Captain John

Reputation: 1891

Yes it does do things that can be done in javascript.

You can get the code if you want from jquery to investigate how it does specific things.

Slide up and slide down are helpers for jquery animate. JQuery animate can modify any css property width height opacity etc. SlideDown/up just modifies Top css property.

Must admit I've never troubled myself to figure out how it's done, I'm pretty sure it's using setInterval feature to modify the property at intervals.

http://api.jquery.com/animate/

Upvotes: 1

nietonfir
nietonfir

Reputation: 4881

In a nutshell: Each browser vendor implements functionality (for the DOM, javascript, CSS, etc.) and exposes it through (nowadays) standardized APIs in Javascript/CSS/HTML.

Your question on how jQuery does it's thing can be answered easily by looking at the jQuery source.

Upvotes: 1

user2019515
user2019515

Reputation: 4503

jQuery is a JavaScript library all functionality is achieved with JavaScript.

For example your .slideDown() method can be done like this:

function slideDown (element, duration, finalheight, callback) {
    var s = element.style;
    s.height = '0px';

    var y = 0;
    var framerate = 10;
    var one_second = 1000;
    var interval = one_second*duration/framerate;
    var totalframes = one_second*duration/interval;
    var heightincrement = finalheight/totalframes;
    var tween = function () {
        y += heightincrement;
        s.height = y+'px';
        if (y<finalheight) {
            setTimeout(tween,interval);
        }
    }
    tween();
}

Source: JavaScript slidedown without jQuery

Upvotes: 2

Vilx-
Vilx-

Reputation: 106912

Yes, you can do it all in Javascript. jQuery guys have no special deals with the browser authors.

In this case, it's achieved simply. First jQuery finds all the <p> elements and puts them in an array. On modern browsers this is achieved with the querySelector() javascript method; on older ones I suspect that jQuery simply enumerates ALL elements and then picks the right ones.

After jQuery has all the elements in an array, it starts the "slideDown" effect. This is achieved simply by using Javascript timers (setTimeout() and setInterval()), plus manipulating CSS properties like height and such.

All in all, jQuery doesn't create anything new. Everything you can do with jQuery, you can do in plain old Javascript as well. Except that it would take a lot more writing.

Upvotes: 2

joshstrike
joshstrike

Reputation: 1823

slideUp(), slideDown(), animate(), etc. are just changing some CSS properties very quickly over time. There's no additional functionality there. They just setInterval and change the height or position of the element a little bit each time.

Upvotes: 2

Related Questions