jQuery animate属性backgroundPositionY

最新推荐文章于 2020-05-21 15:23:06 发布

原创最新推荐文章于 2020-05-21 15:23:06 发布 · 1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#jQuery #animate

本文介绍如何使用jQuery的animate方法通过赋值运算符'+='和'-='来精确控制元素背景图的纵坐标位置，实现从当前背景图位置进行平滑过渡。

诸如:

$(selector).animate({"backgroundPositionY": "100px"}, 100);

$(selector).animate({"backgroundPositionY": "20%"}, 100);

可以设置元素背景图的纵坐标.

如果元素背景图纵坐标已经有了初始值, 那么我想通过animate在初始值的基础上控制背景图的位置, 该怎么操作呢?

通过尝试, 终于找到了解决办法, 可以通过赋值运算符"+="和"-="来实现, 不多说, 上代码:

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

喜欢文学的程序员

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

CSS-背景位置-y | background-position-y

weixin_33939843的博客

09-12

1711

background-position-y属性用于设置初始状态时背景图片在垂直方向上的位置,这个位置相对于通过background-origin定义的背景层的原点进行定位. 需要获得更多的信息可以查看background-position属性,这个属性已经得到了长久且广泛的支持. 注意:background-position-y...

使用backgroundPosition来定位背景图片

Love.Hope.Faith

01-15

1847

*{ background:url(背景图片链接) X坐标 Y坐标； } 如题。这个问题大家一定会遇到。当你在制作网页的时候，一开始的背景图一定是每张图都切出来，一个button的hover效果，要准备两张背景图。这种做法主要有两个缺点： 1.图片在hover的时候会出现切换闪动； 2.如果要修改背景图，需要同时更换图片和修改源

1 条评论您还未登录，请先登录后发表或查看评论

jqBackgroundPositionAnimate.js【修正版】

07-10

jQuery高级版本比如1.6+ 1.8+ 等animate对属性background-position支持不好，要么不支持要么不兼容火狐，这个插件可实现对背景定位属性的支持。并且我对它做了修正，以适用于jQuery后来的高级版本。用法background-position在animate大括号中写成驼峰式，既backgroundPosition

jQuery animate()方法操作 background-position

胡侃抗揍王胖子的博客

10-25

1610

1、首先，要知道的是，不是所有css属性都可以用Jquery动画（animate方法）来动态改变。关于这点，w3school描述如下：关于animate()方法支持的css属性，w3school罗列了可能的 CSS 样式值并提供了实例：http://www.w3school.com.cn/jquery/effect_animate.asp 2、animate()的语法： $(selecto...

jQuery中的animate效果没有backgroundColor背景颜色属性设置--已解决

weixin_44816505的博客

04-23

1991

在练习jQuery的过程中，用到其中的animate做效果，发现它的backgroundColor属性设置了效果无法显示。如下: <body> <div></div> <button>点我</button> <script> $(function() { $('button').cl...

jQury animate操作 background-position 方法

FungLeo's Blog

09-08

4582

今天遇到一个奇怪的问题，在使用jQury animate操作background-position的时候，怎么都不成功，在换成了css方法之后就成功了。问题是，css方法是没有动画效果的。经过百度搜索了一番，语焉不详。优快云上找到一篇文章：http://blog.youkuaiyun.com/goodshot/article/details/8648706，其中说到，animate操作的CSS参数是包括bac

基于jquery animate操作css样式属性小结

10-23

昨天突然有网友问我animate()方法可以来操作所有css属性吗？是的，我告诉他可以的。...接下来通过本篇文章给大家介绍基于jquery animate操作css样式属性小结，对jquery animate css相关知识感兴趣的朋友一起学习吧

jquery.animate:jQuery animate 的简单覆盖，允许将属性作为动态值的函数传递

07-02

jQuery animate 的简单覆盖，允许将属性作为动态值的函数传递。例如，如果您有一个容器需要滚动到特定元素，但容器的其他子元素正在切换，则容器所需的 scrollTop 将在动画完成之前更改。现在我们可以为 ...

jquery animate动画持续运动的实例

01-19

如下所示： function fingers(){ $(.box01 .fingers).animate({width:7.5rem,marginLeft:-3.75rem},500,function(){ $(.box01 .fingers).animate...以上这篇jquery animate动画持续运动的实例就是小编分享给大家的全

jQuery animate easing使用方法图文详解

01-19

从jQuery API 文档中可以知道，jQuery自定义动画的函数.animate( properties [, duration] [, easing] [, complete] )有四个参数： • properties：一组包含作为动画属性和终值的样式属性和及其值的集合 • ...

jQuery插件——可以动态改动颜色的jQueryColor

热门推荐

我想我是海冬天的大海心情随风轻摆

12-08

1万+

1、请选择代码框中所有代码后，保存为 jquery.color.js /*! * jQuery Color Animations v@VERSION * https://github.com/jquery/jquery-color * * Copyright 2012 jQuery Foundation and other contributors * Released under

Jquery如何使用animation动画效果改变背景色的代码

11-20

一、问题引入 jquery的animate动画虽然强大，但是无法使用其进行背景色(background-color)的动画效果变化，因为animate动画效果只能动态改变数值型的参数，例如：top，left，width，height…等等好像网上也有说要装一个 “jquery.ui” 的插件之类的。但是博主我实在不想引入过多的插件，且恰好本人掌握的CSS比较好一点点，所以就想了下面这么个法子。但好在 CSS 它自带的animation动画效果更加强大，它可以为我们提供背景色的动态变化。所以我们可以利用 Js+CSS 的方法达成我们预期效果。二、demo展示 <!DOCTYPE ht

jQuery的animate参数backgroundPos…

夕雨林流金,web全栈,web全端,网站技术博客

04-13

533

$("div").animate({ backgroundPositionX: "-120px", backgroundPositionY: "0px" }, "slow", function(){ $("div").css("background-position", "0px 0px");

JQuery Animate()

weixin_44540993的博客

07-07

635

JQuery Animate() -~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 开发工具与关键技术：vs· jQuery基础作者： xqll 撰写时间：2019/7/6 -~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 下面，我来演示一下 JQuery效果 animate()方法首先是介绍一下它的定义和用法 animate() 方法执行...

jQuery animate()

Cabu_husky的博客

05-21

597

animate()通过CSS样式将元素从一个状态改变为另一个状态。CSS属性值是逐渐改变的，这样就可以创建动画效果。语法： $(selector).animate(styles,speed,easing,callback) 四个参数： 1.一组包含作为动画属性和终值的样式属性和及其值的集合 2.动画时间三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或毫秒数 3.动画形式 jQuery提供两种，默认是缓冲swing，匀速是linear 4.回调函数，在动画完成时执行的函数

CSS中background-position使用技巧

weixin_33827965的博客

06-07

521

一.background-position:left top; 　　背景图片的左上角和容器(container)的左上角对齐，超出的部分隐藏。等同于 background-position:0,0;也等同于background-position:0%,0%; 二.background-position:right bottom; 　　背景图片的右下角和容器(container)的右下角对齐，...

jQuery animate中background-position 无效的解决方法

denghuang4935的博客

05-03

375

今天做一个网站刚好要用到背景动画效果；开始自己$(this).animate({"background-position": "0 0"}, "fast")这样写了但发现没有效果；然后在网上找了一下解决方法、解决方法如下： (function($) { if(!document.defaultView || !document.defaultView.getCom...

jQuery animate方法

Love.Hope.Faith

01-15

1180

如题。使用jQuery animate的方法能够对某一个元素的css属性执行渐变效果。执行语句： $("元素（class或ID）").css({属性初始状态}).stop().animate({元素结束状态}, { duration: 持续时间 }); 使用这个语句基本上可以实现很多效果。例如，让元素从透明

background-position 详解

weixin_30354675的博客

01-19

427