Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

difference between $('html, body').animate and $('body').animate?

For example, to scroll to a certain element on the page (ie here: How to go to a specific element on page?)

$("#fromTHIS").click(function() {     $("html, body").animate({ scrollTop: $("#toTHIS").offset().top }, 500);     return true; }); 

I've tried both and they both look that they are doing the job. What am I missing?

like image 977
Lior Avatar asked Oct 10 '13 18:10

Lior


People also ask

What is the use of the animate () method in jQuery?

The animate() method performs a custom animation of a set of CSS properties. This method changes an element from one state to another with CSS styles. The CSS property value is changed gradually, to create an animated effect. Only numeric values can be animated (like "margin:30px").

Can the animate () method be used to animate any CSS property?

The animate() method is typically used to animate numeric CSS properties, for example, width , height , margin , padding , opacity , top , left , etc. but the non-numeric properties such as color or background-color cannot be animated using the basic jQuery functionality. Note: Not all CSS properties are animatable.

What is the correct syntax of animate () method?

jQuery Animations - The animate() Method The jQuery animate() method is used to create custom animations. Syntax: $(selector). animate({params},speed,callback);

What is animate JavaScript?

JavaScript animations are done by programming gradual changes in an element's style. The changes are called by a timer. When the timer interval is small, the animation looks continuous.


1 Answers

The reason you use a selector for BOTH $('html, body') is because of web browser inconsistency. After a few tests I have found three things:

  1. The browsers Firefox & IE utilize the html portion of this selector
  2. Browsers in the "webkit class" eg: Safari and Chrome respond to the body.
  3. Although one can avoid the issue all together by using $(document) instead.

There's also a ticket on the jQuery bug tracker specifically stating this issue here

like image 61
Joe Avatar answered Sep 26 '22 07:09

Joe