在jQuery中将div左右连续移动
[英]moving div right left continously in jquery
问题描述
我正在尝试在页面加载时连续左右移动div 。 但是我所做的就是点击。 那就是我所不想要的。 这是我的代码：
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> <body> <a href="" class="left">left</a> | <a href="" class="right">right</a> <br /><br /> <div id="foo" style="background:red;width:100px;height:100px;position:absolute"></div> <script> $('.right').click(function(e) { e.preventDefault(); $('#foo').css({ 'right': '0px', 'left': '' }).animate({ 'right' : '30px' }); }); $('.left').click(function(e) { e.preventDefault(); $('#foo').css({ 'right': '', 'left': '0px' }).animate({ 'left' : '30px' }); }); </script>
2 个解决方案
解决方案1
1 2016-03-10 13:42:11
您可以使用CSS animation来做到这一点
#foo { background: red; width: 100px; height: 100px; position: absolute; left: 0; animation: leftRight linear 3s infinite alternate; } @keyframes leftRight { to { left: 100%; transform: translateX(-100%); } }
<div id="foo"></div>
解决方案2
0 已采纳 2016-03-10 13:35:49
jQuery或浏览器未正确自动分配auto值。
使用这样的东西：
$('.right').click(function(e) { e.preventDefault(); $('#foo').css({ 'right': window.innerWidth - $('#foo').position().left - $('#foo').width(), 'left': 'auto' }).animate({ 'right' : '30px' }); }); $('.left').click(function(e) { e.preventDefault(); $('#foo').css({ 'left': $('#foo').position().left, 'right': 'auto' }).animate({ 'left' : '30px' }); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> <a href="" class="left">left</a> | <a href="" class="right">right</a> <br /><br /> <div id="foo" style="background:red;width:100px;height:100px;position:absolute"></div>
如您的问题所述，如果您希望它在页面加载时自动执行任一操作，请执行以下操作：
$(function () { function a() { $('#foo').css({ 'right': window.innerWidth - $('#foo').position().left - $('#foo').width(), 'left': 'auto' }).animate({ 'right' : '30px' }, function () { $('#foo').css({ 'left': $('#foo').position().left, 'right': 'auto' }).animate({ 'left' : '30px' }, a); }); } a(); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> <br /><br /> <div id="foo" style="background:red;width:100px;height:100px;position:absolute"></div>
连续左右移动div
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.