关于jQuery中fade(),show()起始位置的一点小发现


Posted in jQuery onApril 25, 2017

最近在鼓弄主页的时候想要添加一个音乐播放的插件,暂时使用网易与音乐外链播放器,效果是在右下角弹出和消失,于是问题来了:

show()和fade()函数是用来显示或者隐藏元素的函数,可以为其传入时间参数,使得函数在多少毫秒内完成。

但是出现和消失的起始点在哪里呢?

默认的话,是左上角:

关于jQuery中fade(),show()起始位置的一点小发现

但是有的时候要设置元素出现的位置,比如我想让元素以右下角为起始位置,怎么做呢?

我也是否然发现但不确定是否是隐藏属性,就是我为元素设置了如下样式:

aside{
  position: fixed;
  bottom:65px;
  right:20px;
}

如此以来,元素就会以“右下角”作为出现和消失的基准点:

关于jQuery中fade(),show()起始位置的一点小发现

但是这种效果只在为元素设置position属性为fixed或者absolute时才有效果,其它时候没效果?

我认为具体实现就需要翻看源码了,哪位同仁搞清楚这个机制的话,欢迎评论或者私信,个人造诣不够。

另外,跪求一个录制gif的软件,也看到了,上面的动图效果是多么的差,至于比较广泛的GifCam软件,我这里录制出来的会变黑。。好吧,难道是要换电脑了吗???

以上这篇关于jQuery中fade(),show()起始位置的一点小发现就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

jQuery 相关文章推荐
jQuery插件FusionWidgets实现的Cylinder图效果示例【附demo源码】
Mar 23 jQuery
基于jQuery实现瀑布流页面
Apr 11 jQuery
jQuery实现radio第一次点击选中第二次点击取消功能
May 15 jQuery
使用jQuery实现简单的tab框实例
Aug 22 jQuery
基于jQuery的左滑出现删除按钮的示例
Aug 29 jQuery
jQuery实现的文字逐行向上间歇滚动效果示例
Sep 06 jQuery
jQuery UI 实例讲解 - 日期选择器(Datepicker)
Sep 18 jQuery
jQuery实现数字自动增加或者减少的动画效果示例
Dec 11 jQuery
jQuery层叠选择器用法实例分析
Jun 28 jQuery
jQuery中DOM操作原则实例分析
Aug 01 jQuery
jQuery编写QQ简易聊天框
Aug 27 jQuery
jQuery+ajax实现用户登录验证
Sep 13 jQuery
jquery submit()不能提交表单的解决方法
Apr 24 #jQuery
jquery实现异步加载图片(懒加载图片一种方式)
Apr 24 #jQuery
使用jQuery ajaxupload插件实现无刷新上传文件
Apr 23 #jQuery
jQuery实现百度登录框的动态切换效果
Apr 21 #jQuery
推荐三款日期选择插件(My97DatePicker、jquery.datepicker、Mobiscroll)
Apr 21 #jQuery
jquery中$.fn和图片滚动效果实现的必备知识总结
Apr 21 #jQuery
jQuery+pjax简单示例汇总
Apr 21 #jQuery
You might like
在PHP3中实现SESSION的功能(一)
2006/10/09 PHP
PHP远程调试之XDEBUG
2015/12/29 PHP
ASP.NET jQuery 实例3 (在TextBox里面阻止复制、剪切和粘贴事件)
2012/01/13 Javascript
jQuery调用AJAX时Get和post公用的乱码解决方法实例说明
2013/06/04 Javascript
利用JavaScript检测CPU使用率自己写的
2014/03/22 Javascript
有效提高JavaScript执行效率的几点知识
2015/01/31 Javascript
js实现宇宙星空背景效果的方法
2015/03/03 Javascript
微信小程序 富文本转文本实例详解
2016/10/24 Javascript
Bootstrap CSS组件之分页(pagination)和翻页(pager)
2016/12/17 Javascript
canvas实现动态小球重叠效果
2017/02/06 Javascript
详谈jQuery中使用attr(), prop(), val()获取value的异同
2017/04/25 jQuery
jQuery.Form实现Ajax上传文件同时设置headers的方法
2017/06/26 jQuery
Three.js利用Detector.js插件如何实现兼容性检测详解
2017/09/26 Javascript
利用Three.js如何实现阴影效果实例代码
2017/09/26 Javascript
深入理解Vue 单向数据流的原理
2017/11/09 Javascript
Vue 组件传值几种常用方法【总结】
2018/05/28 Javascript
Nodejs在局域网配置https访问的实现方法
2020/10/17 NodeJs
[32:17]完美世界DOTA2联赛循环赛LBZS vs Forest第二场 10月30日
2020/10/31 DOTA
python开发的小球完全弹性碰撞游戏代码
2013/10/15 Python
python3实现全角和半角字符转换的方法示例
2017/09/21 Python
Python探索之ModelForm代码详解
2017/10/26 Python
python 简单备份文件脚本v1.0的实例
2017/11/06 Python
使用python存储网页上的图片实例
2018/05/22 Python
关于tf.reverse_sequence()简述
2020/01/20 Python
python ImageDraw类实现几何图形的绘制与文字的绘制
2020/02/26 Python
keras .h5转移动端的.tflite文件实现方式
2020/05/25 Python
Python DataFrame使用drop_duplicates()函数去重(保留重复值,取重复值)
2020/07/20 Python
Python列表推导式实现代码实例
2020/09/09 Python
Python字符串及文本模式方法详解
2020/09/10 Python
基于python爬取梨视频实现过程解析
2020/11/09 Python
html5 Canvas绘制线条 closePath()实例代码
2012/05/10 HTML / CSS
html5之Canvas路径绘图、坐标变换应用实例
2012/12/26 HTML / CSS
HTML5本地存储localStorage、sessionStorage基本用法、遍历操作、异常处理等
2014/05/08 HTML / CSS
详解canvas.toDataURL()报错的解决方案全都在这了
2020/03/31 HTML / CSS
美国木工工具和用品商店:Woodcraft
2019/10/30 全球购物
2014县政府领导班子三严三实对照检查材料思想汇报
2014/09/26 职场文书