pchome

第一互动时尚科技门户

jquery怎么实现点击一个按钮 div框从右→左，再点击按出乙右政双位容然握接著钮 div框从刚刚的位置移动回原

空气净化器

Unities

Unities UE

讨论回答 (5)

这个效果其实可以用jQuery的animate方法来实现，首先你需要给按钮绑定一个点击事件，然后判断当前的状态，比如可以设置一个变量来记录是否已经移动过。当第一次点击按钮时，让div的left属性减小，比如从100%变为0%，实现从右往左的移动；再次点击时再把它移回去，也就是left从0%变回100%。用animate的话动画过渡会比较平滑，记得设置position为absolute或者relative，不然left属性可能不会生效

其实jQuery实现这个不难，主要是逻辑要理清楚。你可以给按钮添加一个点击事件监听器，然后在这个事件处理函数里面判断当前的位置。比如可以用一个变量isMoved来记录是否已经移动过。然后用animate方法去改变div的left属性，让它从右往左动，或者从左往右动。注意div的position必须是absolute或fixed，不然left和right属性不会生效。这样就能实现来回切换的动画效果了

你可以这样写代码，先给按钮绑定点击事件，然后通过判断div的当前位置来决定往哪边动。比如可以用offset()方法获取当前位置，或者你自己维护一个状态变量。然后用animate方法来改变left的值，比如从100%变成0%，再从0%变回去。也可以用animate的+=或者-=来实现相对移动。不过如果你想让它每次都在屏幕范围内移动，最好还是用百分比或者固定值来控制位置，这样更可控一些

100%。然后给按钮绑定点击事件，每次点击的时候判断一下当前的位置，然后决定是移到左边还是移回来。可以用一个变量来记录状态，比如varmoved=false，点击的时候根据这个变量来决定怎么动。记得设置div的position为absolute或者relative，不然left属性不会生效。整个过程动画会比较流畅，用户体验好一些

我觉得你可以用toggle方法来实现切换效果，不过现在toggle好像不推荐用了，可以自己用一个变量来记录状态。比如一开始div在右边，点击按钮就让它移动到左边，再点回来。用animate方法设置left的值，比如从100%到0%，或者反过来。你还可以用toggleClass来控制位置，这样CSS和JS分离会比较清晰，不过具体还是要看你的布局和需求怎么写了

1元起，底价买苹果华为新品手机去购买

相关问题

帮我推荐一款超级方便使用的屏幕录像软件。谢谢啦~

9992 浏览 4 回答

超级舞者大赛礼包里有什么东西？

9991 浏览 4 回答

vivo120w充电器怎么辨别是不是氮化镓

9983 浏览 4 回答

地下城与勇士火属性强化到120点加多少伤害

9979 浏览 7 回答

超级搞笑谜语

9977 浏览 4 回答

会员和超级哪个更好呢

9959 浏览 4 回答

小米14可不可以用120w充电器充电

9952 浏览 4 回答

黑神话悟空和数字豪华版区别

9946 浏览 6 回答

为何超级用户授权以后qq截图是白屏

9938 浏览 5 回答

Linux 使用的安装软件包問題?

9930 浏览 5 回答

FC15 Linux 如何修改成启动后终端方式，vi 如何才能编辑文本，如何保存，如何退出？

9919 浏览 4 回答

华为超级闪充怎么开启？

9908 浏览 6 回答

华硕ux501j有显卡版，性能怎么，强制降频后能玩lol吗，

9900 浏览 5 回答

vivo手机下载一个应用程序超级慢,怎么处理?

9898 浏览 5 回答

苹果手机怎么开120帧数?

9868 浏览 5 回答

热门问题

上市公司高管包含哪些人,高管持股怎样计算?请指教

9996 浏览 3 回答

什么是广域网？

9996 浏览 5 回答

qq飞车2011年9月10日和11日几倍经验几倍荣耀车队积分、还有在线两小时得什么？说详细点就采纳

9996 浏览 5 回答

MED一AL00华为手机为何总弹广告

9996 浏览 6 回答

为什么烘干的衣物比晒干和晾干的衣服要蓬松柔软许多?

9996 浏览 7 回答

液晶电视按错键花屏,按哪个键恢復电视?

9996 浏览 3 回答

非黄钻用户可以完全免费克隆朋友のQQ空间吗

9996 浏览 2 回答

帝王洁具上黑榜戳穿“高质量”谎言

9996 浏览 5 回答

华为麦芒4支持多大存储空间

9996 浏览 4 回答

联通主副卡用户能调换吗把主卡换成副卡把副卡换成

9996 浏览 4 回答

最新问答

华为手机开了震动却没有怎么处理啊?

1474 浏览 4 回答

vivo手机耳机能用在华为手机上面吗？

9103 浏览 6 回答

华为手机擦除数据后他人能用吗

8382 浏览 5 回答

朋友新买的三星note4手机。指纹来自锁，输入后，开机时怎么快慢都试了还是打不开，最终用密码开的手机。

3551 浏览 5 回答

如何设置微信与朋友聊天时输入文字后加图片？

1998 浏览 5 回答

vivo肿么关掉5g网络

4362 浏览 5 回答

骑马与砍杀荣耀把回整怎么修改

7171 浏览 4 回答

泰星ann结婚了吗

6676 浏览 5 回答

华为手机肿么调时间12小时制？

6044 浏览 5 回答

手机联接电脑导入图片和视频就一直显示来自正在查找就算已经在导入了吗？

9719 浏览 4 回答

电脑版 ©2025 电脑之家版权所有