jquery的animate关于background-position属性
jQuery 的 animate 虽然能直接使用 CSS 的方式来进行动画,但有些属性其实是不支持的,例如:background-position。
- 谷歌支持 background-position-x; background-position-y ;firefox不支持。
- 使用 background-position 插件
- 使用另外一个background-position插件:_this.animate({'background-position':'477px 0px'},750);
/* http://keith-wood.name/backgroundPos.html
Background position animation for jQuery v1.1.1.
Written by Keith Wood (kbwood{at}iinet.com.au) November 2010.
Dual licensed under the GPL (http://dev.jquery.com/browser/trunk/jquery/GPL-LICENSE.txt) and
MIT (http://dev.jquery.com/browser/trunk/jquery/MIT-LICENSE.txt) licenses.
Please attribute the author if you use it. */(function($) { // Hide scope, no $ conflict
var BG_POS = 'bgPos';
var usesTween = !!$.Tween;
if (usesTween) { // jQuery 1.8+
$.Tween.propHooks['backgroundPosition'] = {
get: function(tween) {
return parseBackgroundPosition($(tween.elem).css(tween.prop));
},
set: function(tween) {
setBackgroundPosition(tween);
}
};
}
else { // jQuery 1.7-
// Enable animation for the background-position attribute
$.fx.step['backgroundPosition'] = setBackgroundPosition;
};/* Parse a background-position definition: horizontal [vertical]
@param value (string) the definition
@return ([2][string, number, string]) the extracted values - relative marker, amount, units */
function parseBackgroundPosition(value) {
var bgPos = (value || '').split(/ /);
var presets = {center: '50%', left: '0%', right: '100%', top: '0%', bottom: '100%'};
var decodePos = function(index) {
var pos = (presets[bgPos[index]] || bgPos[index] || '50%').
match(/^([+-]=)?([+-]?\d+(\.\d*)?)(.*)$/);
bgPos[index] = [pos[1], parseFloat(pos[2]), pos[4] || 'px'];
};
if (bgPos.length == 1 && $.inArray(bgPos[0], ['top', 'bottom']) > -1) {
bgPos[1] = bgPos[0];
bgPos[0] = '50%';
}
decodePos(0);
decodePos(1);
return bgPos;
}/* Set the value for a step in the animation.
@param tween (object) the animation properties */
function setBackgroundPosition(tween) {
if (!tween.set) {
initBackgroundPosition(tween);
}
$(tween.elem).css('background-position',
((tween.pos * (tween.end[0][1] - tween.start[0][1]) + tween.start[0][1]) + tween.end[0][2]) + ' ' +
((tween.pos * (tween.end[1][1] - tween.start[1][1]) + tween.start[1][1]) + tween.end[1][2]));
}/* Initialise the animation.
@param tween (object) the animation properties */
function initBackgroundPosition(tween) {
if (!usesTween) {
var elem = $(tween.elem);
var bgPos = elem.data(BG_POS); // Original background position
elem.css('backgroundPosition', bgPos); // Restore original position
tween.start = parseBackgroundPosition(bgPos);
}
tween.end = parseBackgroundPosition($.fn.jquery >= '1.6' ? tween.end :
tween.options.curAnim['backgroundPosition'] || tween.options.curAnim['background-position']);
for (var i = 0; i < tween.end.length; i++) {
if (tween.end[i][0]) { // Relative position
tween.end[i][1] = tween.start[i][1] + (tween.end[i][0] == '-=' ? -1 : +1) * tween.end[i][1];
}
}
tween.set = true;
}/* Wrap jQuery animate to preserve original backgroundPosition. */
if (!usesTween) { // jQuery 1.7-
$.fn.animate = function(origAnimate) {
return function(prop, speed, easing, callback) {
if (prop['backgroundPosition'] || prop['background-position']) {
this.data(BG_POS, this.css('backgroundPosition') || 'left top');
}
return origAnimate.apply(this, [prop, speed, easing, callback]);
};
}($.fn.animate);
}})(jQuery);
jquery的animate关于background-position属性的更多相关文章
- jquery的animate({})动画整理
在网页制作的过程中少不了用到各种动画,形式多种多样,flash,css,js,canvas,等等都能实现,对于其优劣和效果只能说各有千秋. 什么是动画效果,其实网页中的渐变效果就是一种很基础的动画,动 ...
- jQuery之animate()用法
最近在学习jQuery,看到一个很有意思的函数animate(),但是在网上却没有查到相关的详细资料,于是打算参考jQuery API,自己总结一下. 概述 animate() 方法执行 CSS 属性 ...
- JQuery动画animate的stop方法使用详解
JQuery动画animate的stop方法使用详解 animate语法: 复制代码 代码如下: $(selector).animate(styles,speed,easing,callback) 复 ...
- jquery的api以及用法总结-属性/css/位置
属性/css 属性 .attr() attr()设置普通属性,prop()设置特有属性 获取或者设置匹配的元素集合中的第一个元素的属性的值 如果需要获取或者设置每个单独元素的属性值,需要依靠.each ...
- jQuery中Animate进阶用法(一)
jQuery中animate的用法你了解多少呢?如果仅仅是简单的移动位置,显示隐藏,哦!天哪你在浪费资源!因为animate太强大了,你可以有很多意想不到的用法!让我们一起研究一下吧~~ 首先要了解j ...
- 由position属性引申的关于css的进阶讨论(包含块、BFC、margin collapse)
写这篇文章的起因是源于这篇文章:谈谈面试与面试题 中关于position的讨论,文中一开始就说的这句话: 面试的时候问个css的position属性能刷掉一半的人这是啥情况…… 其实这问题我本来打算的 ...
- Css中的Position属性
Css中的Position属性 Css属性在线查询地址: http://www.css88.com/book/css/properties/index.htm CSS 中的 position 属性 在 ...
- DIV的Position属性和DIV嵌套DIV
1.前言 我们在利用div+css进行布局时,常常被div的位置弄的焦头烂额,很多人甚至放弃了div而直接用table.这里一如既往的推荐使用div布局,其实我们只要掌握了div的position属性 ...
- background复合属性详解(上):background-image
background复合属性是个很复杂的属性,花样非常多,比较神奇的是css3 中支持多图片背景了,这篇文章先讲讲background-image属性,其他背景属性会在后续的文章综合总结. 一.最基本 ...
随机推荐
- 在iOS项目中引入MVVM
本文翻译自:http://www.objc.io/issue-13/mvvm.html.为了方便读者并节约时间,有些不是和文章主题相关的就去掉了.如果读者要看原文的话可以通过前面的url直接访问.作者 ...
- swift学习之UIButton
// // ViewController.swift // button // // Created by su on 15/12/7. // Copyright © 2015年 tian. ...
- JAVA内存管理再解
首先我们要明白一点,我们所使用的变量就是一块一块的内存空间!! 一.内存管理原理: 在java中,有java程序.虚拟机.操作系统三个层次,其中java程序与虚拟机交互,而虚拟机与操作系统间交 ...
- devexpress停靠菜单
dxDockSite1.Width := 27; dxDockPanel1.DockTo(dxDockSite1, dtLeft, 0); dxDockPanel2.DockTo(dxDockPane ...
- IDEA 配置SSH2
系统换成了mac os,因为喜欢它的界面体验,同时受不了win下面系统对硬盘的疯狂访问.发现在mac下面,IDEA真的不错,速度上快,并且它的智能提示真的很厉害.但是导入一个myeclipse的ssh ...
- 常用脚本--Kill所有连接到指定数据库上的回话
USE [master] GO /****** Object: StoredProcedure [dbo].[Sp_KillAllProcessInDB] Script Date: 02/07/201 ...
- C# 依赖注入 & MEF
之前面试有问道依赖注入,因为一直是做客户端的发开发,没有接触这个,后边工作接触到了MEF,顺便熟悉一下依赖注入 详细的概念解释就不讲了,网上一大把,个人觉着依赖注入本质是为了解耦,方便扩展 依赖注入的 ...
- leetcode 实现strStr()
实现strStr()函数. 给定一个 haystack 字符串和一个 needle 字符串,在 haystack 字符串中找出 needle 字符串出现的第一个位置 (从0开始).如果不存在,则返回 ...
- Linux下.Net Core+Nginx环境搭建小白教程
前言 对于接触.Net Core的我们来说之前从未接触过Linux,出于资源和性能及成本的考虑我们可能要将我们的环境搬到Linux下,这对于我们从未接触过Linux的童鞋们来说很棘手,那么我今天将带你 ...
- 类似gitlab代码提交的热力图怎么做?
本文由 网易云发布. 作者:张淞(本篇文章仅限知乎内部分享,如需转载,请取得作者同意授权.) 昨夜,网易有数产品经理路过开发的显示屏前见到了类型这样的一张图: 于是想到有数能不能做出这样的图来?作为 ...