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

最新推荐文章于 2021-04-09 20:56:23 发布
最新推荐文章于 2021-04-09 20:56:23 发布
阅读量1.7k 收藏 1
点赞数 2
分类专栏： Javascript 文章标签： javascript ViewUI
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/pyzheng/article/details/84417131
版权
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这个样式值，否则无效．

今天试了很久，才发现这个问题，哈.....
不净之心
关注
  • 2
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
jQuery1.5.1 animate方法源码阅读
12-08
6. 对于`height`和`width`动画，`animate`方法会处理溢出（overflow）属性，确保元素在动画过程中不会导致意外的布局问题。 ```javascript // Make sure that nothing sneaks out opt.overflow = [this.style....
jQuery中animate()的方法-----回到顶部的详情讨论
luoawai的博客
11-19 1243
使用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() 方法
极客神殿
09-27 673
实例通过改变元素的高度，对元素应用动画：$("button").click(function(){ $("#box").animate({height:"300px"}); }); 定义和用法animate() 方法执行 CSS 属性集的自定义动画。该方法通过 CSS 样式将元素从一个状态改变为另一个状态。CSS属性值是逐渐改变的，这样就可以创建动画效果。只有数字值可创建动画（比如 “margin:
jquery动画顺序执行_jQuery中animate的几种用法与注意事项
weixin_39848097的博客
12-21 731
一、animate语法结构animate(params,speed,callback)params:一个包含样式属性及值的映射,比如{key1:value1,key2:value2}speed:速度参数[可选]callback：在动画完成时执行的函数[可选]二、自定义简单动画用一个简单例子来说明，实现单击某div在页面上横向飘动的效果。#cube{position:relative;/* 不加这句...
jquery使用animate方法实现控制元素移动
10-24
animate方法的基本用法是jQuery对象的animate函数，其接受两个主要参数：第一个是一个对象，用于指定要变化的CSS属性和目标值；第二个是一个可选的持续时间参数，用于定义动画的执行时间，单位是毫秒。 在本文中，...
浅谈jQuery animate easing的具体使用方法(推荐)
10-22
本文将深入探讨jQuery中animate方法中easing参数的具体使用方法，以及如何利用jQuery Easing插件实现更加丰富的动画效果。 首先，我们来看看jQuery animate方法的基本结构。它有四个参数： 1. properties：一组...
基于jquery animate操作css样式属性小结
11-22
根据描述和提供的部分内容，我们将深入探讨如何使用 `animate()` 方法以及它可以操作的一些CSS属性。 首先，`animate()` 方法的核心在于能够创建自定义的动画效果，它接受一个包含CSS属性的对象作为参数，以及动画...
jQuery中animate的几种用法与注意事项
10-20
jQuery中的`animate()`方法是用于创建平滑的动画效果的核心函数。它允许开发者自定义CSS样式的变化，并在指定的时间内逐步应用这些变化。在本文中，我们将深入探讨`animate()`的多种用法以及一些需要注意的事项。 #...
jquery中的 $(".button").animate({top:+80},500);中存在的问题
tianjiliuhen的博客
09-03 515
原文地址：http://www.5ixiudou.com/portal/detailInfo/1000000005/224 在模拟数字电视的菜单中的上下滚动时，使用了这个功能。 当发生了滚动，仍然按下 上 键时，应该选择“尧庙”上面的那个按钮，并且所有的按钮向下移动。这里采用的方案是，将所有的按钮放到一个 div 中，然后移动该div。将 该 div 设置 样式 position:rela...
关于JQuery animate()方法
weixin_30323961的博客
09-01 315
html: <button>点击我</button> <p>如果你想在一个涉及动画的函数之后来执行语句，请使用callback函数</p> <div class="panel"></div> <div class="content"></div> ...
jQuery动画animate和scrollTop结合使用
开心果的专栏
11-29 1万+
工作记录
$(”body“).animate({“scrollTop”:top})不被支持问题解决
u013868665的博客
01-17 4672
//将代码改为 $("html,body").animate({"scrollTop":top}); =$('html,body').animate({scrollTop: 0}, 500);//500滑动的时间，单位：毫秒；0，到某端的距离
jQuery中animate()的方法以及$("body").animate({"scrollTop":top})不被Firefox支持问题的解决
热门推荐
干勾鱼的CSDN博客
03-10 2万+
jQuery中animate()的方法可以去w3school查看，这里主要说一下：$("body").animate({"scrollTop":top})不被Firefox支持问题的解决。其实是使用body的：$("body").animate({"scrollTop":top})只被chrome支持，而不被Firefox支持。而使用html的：$("html").animate({"scrollT
自定义动画方法animate()
妖怪的博客
03-27 1431
1.自定义简单动画 animate()方法可以使元素动起来,而且animate()方法更具有灵活性.通过animate()方法,能够实现更加精细新颖的动画效果;使用animate()方法之前,为了能影响该元素的"top","left","bottom"和"right"样式属性,必须把元素的position样式设置为"relative"或者"absolut" 2.累加,累减动画 在之前的代码中,设置了{left:"500px"}作为动作参数.如果在500px之前加上"+="或者"-="符号表示在当前位置累加
jQuery animate()left的注意
小易不止于搬砖的博客
04-09 541
.music{ width: 550px; height: 120px; background: rgb(10, 0, 0); position: relative; left: 0; margin-left: 0; bottom: -7px; opacity: 0.8; box-shadow: 15px 10px 10px 1px #8c8f82; } 把position:relativer然后animate中的left,top才
jquery animate 的 left right top 动画失效
sc6231565的专栏
07-20 5413
Hello! $("#block").animate({ left: '100px', top: '100px' }, 1000); 动画失效,很郁闷,后来网上找到答案,原因是要对 #block设置 #block{ position: absolute; }
jquery使用animate 实现无缝轮播图
最新发布
04-30
以下是使用 jQuery 的 animate() 方法实现无缝轮播图的示例代码： HTML 代码： ``` <div class="slider"> <ul> <li><img src="image1.jpg"></li> <li><img src="image2.jpg"></li> <li><img src="image3.jpg"></li> <li><img src="image4.jpg"></li> </ul> </div> ``` CSS 代码： ``` .slider { position: relative; overflow: hidden; width: 600px; height: 300px; } .slider ul { position: absolute; left: 0; top: 0; width: 2400px; } .slider li { float: left; width: 600px; height: 300px; } ``` JavaScript 代码： ``` $(function() { var sliderWidth = $('.slider').width(); var slideCount = $('.slider ul li').length; var slideWidth = sliderWidth / slideCount; var currentPosition = 0; $('.slider ul').css('width', slideWidth * slideCount); function moveSlider() { currentPosition -= slideWidth; if (currentPosition == -sliderWidth) { $('.slider ul').css('left', 0); currentPosition = 0; } $('.slider ul').animate({ left: currentPosition }, 500); } var sliderInterval = setInterval(moveSlider, 3000); $('.slider').hover(function() { clearInterval(sliderInterval); }, function() { sliderInterval = setInterval(moveSlider, 3000); }); }); ``` 解释： 1. 初始化一些变量：轮播图容器的宽度、轮播图中图片的数量、每张图片的宽度、当前位置。 2. 设置轮播图 ul 元素的宽度，使所有图片能够在同一行中排列。 3. 编写 moveSlider() 函数，该函数用于根据当前位置移动轮播图，并在移动到最后一张图片时重新回到第一张图片。 4. 使用 setInterval() 函数来定时调用 moveSlider() 函数，实现自动轮播。 5. 在轮播图容器上添加 hover 事件，当鼠标移入时清除轮播定时器，当鼠标移出时重新启动轮播定时器。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值