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?
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").
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.
jQuery Animations - The animate() Method The jQuery animate() method is used to create custom animations. Syntax: $(selector). animate({params},speed,callback);
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.
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:
Firefox
& IE
utilize the html portion of this selectorSafari
and Chrome
respond to the body.$(document)
instead.There's also a ticket on the jQuery bug tracker specifically stating this issue here
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With