JQuery的animate方法left和top属性注意的问题

最新推荐文章于 2020-12-21 11:41:07 发布
原创 最新推荐文章于 2020-12-21 11:41:07 发布 · 1.7k 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#javascript #ViewUI

本文探讨了使用CSS样式和JavaScript进行元素定位时遇到的问题。特别是当使用JavaScript的animate方法调整元素位置时，若未设置CSS的position属性，则animate可能无法生效。通过本文，读者可以了解到如何正确地结合CSS和JavaScript来实现动画效果。
HTML代码:
<div class="test1" style="background: #98bf21;position: relative; ">a</div>


Javascript代码:
$(".test1").animate({
		height : 140,
		left: 200,
		width:300,
		top:300
	}, "slow");


以为animate设定left后者top的属性，所以应该提供position这个样式值，否则无效．

今天试了很久，才发现这个问题，哈.....
jQuery1.5.1 animate方法源码阅读
12-08
6. 对于`height`和`width`动画，`animate`方法会处理溢出（overflow）属性，确保元素在动画过程中不会导致意外的布局问题。 ```javascript // Make sure that nothing sneaks out opt.overflow = [this.style....
基于jquery animate操作css样式属性小结
11-22
根据描述和提供的部分内容，我们将深入探讨如何使用 `animate()` 方法以及它可以操作的一些CSS属性。 首先，`animate()` 方法的核心在于能够创建自定义的动画效果，它接受一个包含CSS属性的对象作为参数，以及动画...
jQuery中animate()方法以及$('body').animate({"scrollTop":top})不被Firefox支持问题的解决
weixin_34062469的博客
09-09 173
$("body"）.animate({"scrollTop":top})： 只被chrome支持，而不被Firefox支持 $("html").animate({"scrollTop":top})： 只被Firefox支持，而不被chrome支持。 如果想让这段js被chrome和Firefox都支持的话，应该这样： $("html,body").animate({"scrollTo...
jQuery中animate()的方法-----回到顶部的详情讨论
luoawai的博客
11-19 1381
使用body的： $("body").animate({"scrollTop":top}) 只被chrome支持，而不被Firefox支持。 而使用html的： $("html").animate({"scrollTop":top}) 只被Firefox支持，而不被chrome支持。 如果想让这段js被chrome和Firefox都支持的话，应该这样： $("html,body").an...
jQuery中动画函数animate的用法详解
FreeSpider
05-25 1万+
定义和用法 animate()方法执行CSS属性集的自定义动画，该方法会将一个属性在指定或者默认的时间内从一个属性值变化到另一个属性值，由于属性值是逐渐变化的，所以就形成了所谓的动画效果。 方法参数 $(selector).animate(styles,speed,easing,callback) styles： styles用来设置对象属性值的目标值，即需要将属性值变成什么状...
jQuery中animate（）动画效果的实现
萧十一郎博客
03-30 2167
animate（）动画效果的实现
jQuery animate() 方法
极客神殿
09-27 739
实例通过改变元素的高度，对元素应用动画：$("button").click(function(){ $("#box").animate({height:"300px"}); }); 定义和用法animate() 方法执行 CSS 属性集的自定义动画。该方法通过 CSS 样式将元素从一个状态改变为另一个状态。CSS属性值是逐渐改变的，这样就可以创建动画效果。只有数字值可创建动画（比如 “margin:
浅谈jQuery animate easing的具体使用方法(推荐)
10-22
本文将深入探讨jQuery中animate方法中easing参数的具体使用方法，以及如何利用jQuery Easing插件实现更加丰富的动画效果。 首先，我们来看看jQuery animate方法的基本结构。它有四个参数： 1. properties：一组...
jQuery animate和CSS3相结合实现缓动追逐效果附源码下载
10-22
具体到实现步骤，作者首先使用了jQuery的animate()方法来动态调整HTML元素的位置（top、left属性），并设定动画持续时间（400毫秒）。通过连续调用animate()方法并传入不同的目标位置，元素会在页面上呈现出连续的...
jquery使用animate方法实现控制元素移动
10-24
animate方法的基本用法是jQuery对象的animate函数，其接受两个主要参数：第一个是一个对象，用于指定要变化的CSS属性和目标值；第二个是一个可选的持续时间参数，用于定义动画的执行时间，单位是毫秒。 在本文中，...
jquery动画顺序执行_jQuery中animate的几种用法与注意事项
weixin_39848097的博客
12-21 831
一、animate语法结构animate(params,speed,callback)params:一个包含样式属性及值的映射,比如{key1:value1,key2:value2}speed:速度参数[可选]callback：在动画完成时执行的函数[可选]二、自定义简单动画用一个简单例子来说明，实现单击某div在页面上横向飘动的效果。#cube{position:relative;/* 不加这句...
jquery中的 $(".button").animate({top:+80},500);中存在的问题
tianjiliuhen的博客
09-03 563
原文地址：http://www.5ixiudou.com/portal/detailInfo/1000000005/224 在模拟数字电视的菜单中的上下滚动时，使用了这个功能。 当发生了滚动，仍然按下 上 键时，应该选择“尧庙”上面的那个按钮，并且所有的按钮向下移动。这里采用的方案是，将所有的按钮放到一个 div 中，然后移动该div。将 该 div 设置 样式 position:rela...
关于JQuery animate()方法
weixin_30323961的博客
09-01 363
html: <button>点击我</button> <p>如果你想在一个涉及动画的函数之后来执行语句，请使用callback函数</p> <div class="panel"></div> <div class="content"></div> ...
jQuery动画animate和scrollTop结合使用
开心果的专栏
11-29 1万+
工作记录
jQuery中animate()的方法以及$("body").animate({"scrollTop":top})不被Firefox支持问题的解决
热门推荐
干勾鱼的优快云博客
03-10 2万+
jQuery中animate()的方法可以去w3school查看，这里主要说一下：$("body").animate({"scrollTop":top})不被Firefox支持问题的解决。其实是使用body的：$("body").animate({"scrollTop":top})只被chrome支持，而不被Firefox支持。而使用html的：$("html").animate({"scrollT
$(”body“).animate({“scrollTop”:top})不被支持问题解决
u013868665的博客
01-17 4741
//将代码改为 $("html,body").animate({"scrollTop":top}); =$('html,body').animate({scrollTop: 0}, 500);//500滑动的时间，单位：毫秒；0，到某端的距离
jquery animate 的 left right top 动画失效
sc6231565的专栏
07-20 5510
Hello! $("#block").animate({ left: '100px', top: '100px' }, 1000); 动画失效,很郁闷,后来网上找到答案,原因是要对 #block设置 #block{ position: absolute; }
jQuery animate方法实现动画效果实例详解
随后，利用jQuery选择器选中该元素，并调用`.animate()`方法对其`left`、`top`、`width`、`height`或`opacity`等属性进行修改，从而实现移动、缩放、淡入淡出等动画行为。其基本语法结构为：`$(selector).animate({...
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值