jQuery动画效果animate和scrollTop结合使用实例

CSS属性值是逐渐改变的,这样就可以创建动画效果。 只有数字值可创建动画(比如 "margin:30px")。 字符串值无法创建动画(比如 "background-color:red")。

复制代码 代码如下:

$(‘#shang‘).click(function(){$(‘html,body‘).animate({scrollTop: ‘0px‘}, 800);});

上面的代码表示滚动条跳到0的位置,页面移动速度是800。 结合scrollTop实用示例:

复制代码 代码如下:

jQuery(document).ready(function($){  $(‘#shang‘).click(function(){   $(‘html,body‘).animate({scrollTop: ‘0px‘}, 800);  });  $(‘#comt‘).click(function(){   $(‘html,body‘).animate({scrollTop:$(‘#comments‘).offset().top}, 800);  });  $(‘#xia‘).click(function(){   $(‘html,body‘).animate({scrollTop:$(‘#footer‘).offset().top}, 800);  }); });

表示点击相关ID移动到指定位置: 点击ID为shang的元素,回到顶部; 点击ID为comt的元素,回到ID为comments的位置; 点击ID为xia的元素,回到底部;

原生js如何实现jQuery.animate中的scrollTop方法

radical                                2016年12月02日提问

  • 关注                                                                                                      4 关注
  • 收藏                                                                                                      0 收藏,1k 浏览

问题对人有帮助,内容完整,我也想知道答案                                                                                      0                             问题没有实际价值,缺少关键内容,没有改进余地

网上找不到一个好的介绍来实现,

$(‘html, body‘).animate({
  scrollTop: 800
}, 1000)

怎么控制这个scrollTop的 时间呢?

使用评论询问更多信息或提出修改意见,请不要在评论里回答问题

提交评论

×                         评论支持部分 Markdown 语法:**bold**_italic_[link](http://example.com)> 引用`code`-                         列表。 同时,被你 @ 的用户也会收到通知

查看全部 3 个回答

答案对人有帮助,有参考价值                                                  0                 答案没帮助,是错误的答案,答非所问

你要做的不是控制时间,而是控制步长,比如800px,800ms,就是800ms内移动800px,如果是1600px,那就800ms内移动1600px

时间: 2024-11-05 02:21:52

jQuery动画效果animate和scrollTop结合使用实例的相关文章

jquery动画效果 animate详解

animate(params,[speed],[easing],[fn]) $(selector).animate(styles,speed,easing,callback) 参数 styles 必需.规定产生动画效果的 CSS 样式和值.可能的 CSS 样式值(提供实例):backgroundPositionborderWidthborderBottomWidthborderLeftWidthborderRightWidthborderTopWidthborderSpacingmarginma

JavaScript之jQuery-5 jQuery 动画效果(隐藏和显示、自定义动画、并发与排列效果)

一.jQuery 隐藏和显示 基本显示.隐藏效果 - show() / hide() - 作用: 通过同时改变元素的宽度和高度来实现显示或隐藏 - 用法: $obj.show(执行时间,回调函数); 执行时间:slow,normal,fast或毫秒数 回调函数:动画执行完毕之后要执行的函数 滑动式动画效果 - slideDown() / slideUp() - 作用: 通过改变高度来实现显示或者隐藏的效果 - 用法同 show() / hidden() 淡入淡出式动画效果 - fadeIn()

jQuery动画效果(借鉴他人的)

(1)jquery中常见的几种动画效果 (2)动画队列执行的顺序 对于一组元素上的动画效果,有如下两种情况: a) 当在一个animate()方法中应用多个属性时,动画是同时发生的. b) 当以链式的写法应用动画方法时,动画是按照顺序发生的. 对 于多组元素上的动画效果,有如下情况: a) 默认情况下,动画都是同时发生的. b) 当以回调的形式应用动画方式时,动画是按照回调顺序发生的. 另外,在动画方法中,要注意其他非动画的方法会插队,例如css()方法,要使这些非动画的 方法也按照顺序来执行,

jquery 动画效果插件

从jQuery API 文档中可以知道,jQuery自定义动画的函数.animate( properties [, duration] [, easing] [, complete] )有四个参数: properties:一组包含作为动画属性和终值的样式属性和及其值的集合duration(可选):动画执行时间,其值可以是三种预定速度之一的字符串("slow", "normal", or "fast")或表示动画时长的毫秒数值(如:1000)eas

jQuery自学笔记(三):jQuery动画效果

jQuery隐藏和显示: 使用 hide( ) 和 show( ) 方法来隐藏和显示 HTML 元素: 语法: $(selector).hide(speed,callback); $(selector).show(speed,callback); 可选的 speed 参数规定隐藏/显示的速度,可以取以下值:"slow"."fast" 或毫秒,可选的 callback 参数是隐藏或显示完成后所执行的函数名称. 一个关于调用callback函数的实例: $("

jQuery 动画效果

在以前很长一段时间里,网页上的各种特效还需要采用 flash 在进行.但最近几年里,我们已经很少看到这种情况了,绝大部分已经使用 JavaScript 动画效果来取代 flash.这里说的取代是网页特效部分,而不是动画.网页特效比如:渐变菜单.渐进显示.图片轮播等:而动画比如:故事情节广告.MV 等等. 一.显示.隐藏 jQuery 中显示方法为:.show(),隐藏方法为:.hide().在无参数的时候,只是硬性的显 示内容和隐藏内容. $('.show').click(function(){

jquery动画效果总结

一.jquery的动画速度fast-slow对应着600ms,200ms,不写是400ms 二.禁用jquery的动画 将jQuery.fx.off设置为true即可 $(".stopping").click(function(){ jQuery.fx.off = true;//禁用所有jquery的动画 }) 三.jquery动画是异步的调用动画方法时会立刻返回,动画则在"后台"执行,也就是方法会在动画之前完成,所以可以给动画方法添加第二个参数 $("#

一款简洁而强大的前端框架JQUery—动画效果及剪刀石头布小游戏

jQuery是什么? jQuery是一个快速.简洁的JavaScript框架,它封装JavaScript常用的功能代码,提供一种简便的JavaScript设计模式,优化HTML文档操作.事件处理.动画设计和Ajax交互.它封装JavaScript常用的功能代码,提供一种简便的JavaScript设计模式,优化HTML文档操作.事件处理.动画设计和Ajax交互. JQuery效果-隐藏和显示 .show()让隐藏的元素显示.效果为:同时修改元素的高度.宽度.opacity属性 .hide()让显示

Jquery动画(animate)的使用及扩展说明

JQuery动画可以实现非常多的效果,并且支持扩展动画效果,其中 http://easings.net/zh-cn# 在基于JQuery上作了非常有用的动画扩展,尤其在一些曲线或抛物线上没有这些公式很难做出理想的动画来. JQuery动画的底层实现核心思路是把整个区间分割成n个时间段,按时间动画关系函数来计算出当时所在移动(变化)的区间比率值.这是一个easings自由掉落动画曲线,横向为时间,纵向为移动(变化)区间,在不同的时间里计算出对应的移动(变化)区间比例值即可实现对应的动画效果.下面来