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

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

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

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

默认的话，是左上角：

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

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

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

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

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

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

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

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

赞 (0)

相关推荐

  • 浅谈jQuery中hide和fadeOut的区别 show和fadeIn的区别

    hide和fadeOut 显示效果有什么区别? show和fadeIn显示效果都一样? 很多朋友在学习jQuery的时候 会遇到这个问题 ,hide和 fadeOut都可以带有参数: $(selector).hide(speed,callback); $(selector).fadeOut(speed,callback); 首先我们从名字上就可以看出 hide是隐藏而fadeOut是淡出,当然名字不能看出具体的区别,只能体现他们是不同的而已.但是当我们把参数 speed 设置稍微长一些就可以看出

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

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

    最近在鼓弄主页的时候想要添加一个音乐播放的插件,暂时使用网易与音乐外链播放器,效果是在右下角弹出和消失,于是问题来了: show()和fade()函数是用来显示或者隐藏元素的函数,可以为其传入时间参数,使得函数在多少毫秒内完成. 但是出现和消失的起始点在哪里呢? 默认的话,是左上角: 但是有的时候要设置元素出现的位置,比如我想让元素以右下角为起始位置,怎么做呢? 我也是否然发现但不确定是否是隐藏属性,就是我为元素设置了如下样式: aside{ position: fixed; bottom:65

  • 易语言寻找指定文本在另一文本中最后出现的位置

    易语言寻找指定文本在另一文本中最后出现的位置

    倒找文本命令 英文命令:InStrRev 操作系统支持:Windows.Linux    所属类别:文本操作 返回一个整数值,指定一文本在另一文本中最后出现的位置,位置值从 1 开始.如果未找到,返回-1. 语法:  整数型  倒找文本 (被搜寻的文本,欲寻找的文本,［起始搜寻位置］,是否不区分大小写) 例程 说明 通过"倒找文本"命令从指定文本中的指定起始位置开始从右向左寻找指定文本在这段文本中的位置. 运行结果: 总结 以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工

  • 老生常谈jquery中detach()和remove()的区别

    JQuery是一个很大强的工具库,在工作中开发中,可是有些方法还是因为不常用到,或是没有注意到而被我们而忽略. remove()和detach()可能就是其中的一个,可能remove()我们用得比较多,而detach()就可能会很少了 通过一张对比表来解释2个方法之间的不同 方法名 参数 事件及数据是否也被移除 元素自身是否被移除 remove 支持选择器表达 是 是(无参数时),有参数时要根据参数所涉及的范围 detach 参数同remove 否 情况同remove remove:移除节点 -

  • 详谈jQuery中的一些正则匹配表达式

    jQuery常用正则匹配表达式 //整数 "^-?[1-9]\\d*$", //正整数 "^[1-9]\\d*$", //负整数 intege2: "^-[1-9]\\d*$", //数字 num: "^([+-]?)\\d*\\.?\\d+$", //正数(正整数 + 0) num1: "^[1-9]\\d*|0$", //负数(负整数 + 0) num2: "^-[1-9]\\d*|0$&qu

  • 分享有关jQuery中animate、slide、fade等动画的连续触发、滞后反复执行的bug

    我写文章的风格就是喜欢在开头讲问题法伤的背景: 因为最近要做个操作选项的呼出,然后就想到了用默认隐藏,鼠标划过的时候显示的方法. 刚开始打算添加一个class="active",直接触发mouseover(或者mouseenter)的时候add,mouseout(或者mouseleave)的时候remove,这个解决方法很简单,也很实用,但是体验上可能不是那么酷炫(好吧,这个词用的,瞬间感觉好low啊),所以就想到了用animate或者slide这些jQuery的动画,然后一开始讲真,

  • jQuery中isFunction方法的BUG修复

    jQuery 1.4 源码 449 行(core.js 431 行),判断是否为函数的方法如下(思路来源于 Douglas Crockford 的<The Miller Device>): isFunction: function( obj ) {    return toString.call(obj) === "[object Function]";}, 同时 jQuery 的作者也作了部分注释: See test/unit/core.js for details co

  • jQuery中prepend（）方法使用详解

    jQuery中prepend（）方法使用详解

    prepend()方法将指定元素插入匹配元素按内部的开头,其作用和prependTo()方法基本相同,只在语法上有差别,虽然说在语法形式上看基本相同. 下面介绍下语法结构: 复制代码 代码如下: $(selector).prepend(content) 参数列表: demo: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author&qu

  • JQuery中each()的使用方法说明

    JQuery中each()的使用方法说明

    each()函数是基本上所有的框架都提供了的一个工具类函数,通过它,你可以遍历对象.数组的属性值并进行处理.jQuery和jQuery对象都实 现了该方法,对于jQuery对象,只是把each方法简单的进行了委托:把jQuery对象作为第一个参数传递给jQuery的each方法.换句话 说:jQuery提供的each方法是对参数一提供的对象的中所有的子元素逐一进行方法调用.而jQuery对象提供的each方法则是对jQuery内 部的子元素进行逐个调用. each函数根据参数的类型实现的效果不完

  • jQuery中ScrollTo用法示例

    jQuery中ScrollTo用法示例

    本文实例讲述了jQuery中ScrollTo用法.分享给大家供大家参考,具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <h

  • 从零开始学习jQuery (四) jQuery中操作元素的属性与样式

    从零开始学习jQuery (四) jQuery中操作元素的属性与样式

    一.摘要 本篇文章讲解如何使用jQuery获取和操作元素的属性和CSS样式. 其中DOM属性和元素属性的区分值得大家学习. 二.前言 通过前面几章我们已经能够完全控制jQuery包装集了, 无论是通过选择器选取对象, 或者从包装集中删除,过滤元素. 本章将讲解如何使用jQuery获取和修改元素属性和样式. 三. 区分DOM属性和元素属性 一个img标签: <img src="images/image.1.jpg" id="hibiscus" alt="

随机推荐