在jquery中不断向左移动div(moving div right left continously in jquery)
在jquery中不断向左移动div(moving div right left continously in jquery)
我试图在页面加载时左右移动div 。 但我所做的就是继续点击。 这就是我不想要的。 这是我的代码：
<script src="https://ajax.googleapis.com/ajax/libs/jque
在jquery中不断向左移动div(moving div right left continously in jquery)
我试图在页面加载时左右移动div 。 但我所做的就是继续点击。 这就是我不想要的。 这是我的代码：
<script src="https://ajax./ajax/libs/jquery/1.12.0/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' : '0px'
});
});
$('.left').click(function(e) {
e.preventDefault();
$('#foo').css({ 'right': '', 'left': '0px' }).animate({
'left' : '0px'
});
});
</script>
I am trying to move a div continuously left and right on page load. But what I did is moving on click. And that's what I don't want. Here is my code:
<script src="https://ajax./ajax/libs/jquery/1.12.0/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' : '0px'
});
});
$('.left').click(function(e) {
e.preventDefault();
$('#foo').css({ 'right': '', 'left': '0px' }).animate({
'left' : '0px'
});
});
</script>
最满意答案
jQuery或浏览器未正确自动分配auto值。
使用这样的东西：
$('.right').click(function(e) {
e.preventDefault();
$('#foo').css({ 'right': window.innerWidth - $('#foo').position().left - $('#foo').width(), 'left': 'auto' }).animate({
'right' : '0px'
});
});
$('.left').click(function(e) {
e.preventDefault();
$('#foo').css({ 'left': $('#foo').position().left, 'right': 'auto' }).animate({
'left' : '0px'
});
});
<script src="https://ajax./ajax/libs/jquery/1.12.0/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' : '0px'
}, function () {
$('#foo').css({ 'left': $('#foo').position().left, 'right': 'auto' }).animate({
'left' : '0px'
}, a);
});
}
a();
});
<script src="https://ajax./ajax/libs/jquery/1.12.0/js"></script>
<br /><br />
<div id="foo" style="background:red;width:100px;height:100px;position:absolute"></div>
The auto values are not correctly automatically assigned by jQuery or the browser.
Use something like this:
$('.right').click(function(e) {
e.preventDefault();
$('#foo').css({ 'right': window.innerWidth - $('#foo').position().left - $('#foo').width(), 'left': 'auto' }).animate({
'right' : '0px'
});
});
$('.left').click(function(e) {
e.preventDefault();
$('#foo').css({ 'left': $('#foo').position().left, 'right': 'auto' }).animate({
'left' : '0px'
});
});
<script src="https://ajax./ajax/libs/jquery/1.12.0/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>
As your question says, if you want it to automatically do either, on page load, do this:
$(function () {
function a() {
$('#foo').css({ 'right': window.innerWidth - $('#foo').position().left - $('#foo').width(), 'left': 'auto' }).animate({
'right' : '0px'
}, function () {
$('#foo').css({ 'left': $('#foo').position().left, 'right': 'auto' }).animate({
'left' : '0px'
}, a);
});
}
a();
});
<script src="https://ajax./ajax/libs/jquery/1.12.0/js"></script>
<br /><br />
<div id="foo" style="background:red;width:100px;height:100px;position:absolute"></div>
#感谢您对电脑配置推荐网 - 最新i3 i5 i7组装电脑配置单推荐报价格的认可，转载请说明来源于"电脑配置推荐网 - 最新i3 i5 i7组装电脑配置单推荐报价格
上传时间： 2023-04-28 04:54:27
推荐阅读
| 留言与评论（共有 19 条评论） |
| 本站网友 寺院晚课 | 15分钟前 发表 |
| 100px;position | |
| 本站网友 显存 | 4分钟前 发表 |
| '0px' | |
| 本站网友 硬盘读写速度 | 22分钟前 发表 |
| absolute"></div> The auto values are not correctly automatically assigned by jQuery or the browser. Use something like this | |
| 本站网友 南宁百度seo | 26分钟前 发表 |
| $(function () { function a() { $('#foo').css({ 'right' | |
| 本站网友 辽宁师范大学招生网 | 28分钟前 发表 |
| 'left' | |
| 本站网友 fedex国际快递电话 | 26分钟前 发表 |
| 100px;height | |
| 本站网友 兴工街租房 | 4分钟前 发表 |
| 使用这样的东西： $('.right').click(function(e) { e.preventDefault(); $('#foo').css({ 'right' | |
| 本站网友 谷歌注册 | 6分钟前 发表 |
| window.innerWidth - $('#foo').position().left - $('#foo').width() | |
| 本站网友 冲刺中国第三季 | 28分钟前 发表 |
| //ajax./ajax/libs/jquery/1.12.0/js"></script> <br /><br /> <div id="foo" style="background | |
| 本站网友 美味学院 | 16分钟前 发表 |
| //ajax./ajax/libs/jquery/1.12.0/js"></script> <a href="" class="left">left</a> | <a href="" class="right">right</a> <br /><br /> <div id="foo" style="background | |
| 本站网友 荣安琴湾 | 27分钟前 发表 |
| absolute"></div> 正如您的问题所示 | |
| 本站网友 安惠 | 27分钟前 发表 |
| 这是我的代码： <script src="https | |
| 本站网友 窝沟龋 | 9分钟前 发表 |
| 'left' | |
| 本站网友 安卓系统恢复 | 8分钟前 发表 |
| '0px' }); }); <script src="https | |
| 本站网友 北京婚纱摄影 | 1分钟前 发表 |
| //ajax./ajax/libs/jquery/1.12.0/js"></script> <a href="" class="left">left</a> | <a href="" class="right">right</a> <br /><br /> <div id="foo" style="background | |
| 本站网友 义乌搬家 | 23分钟前 发表 |
| //ajax./ajax/libs/jquery/1.12.0/js"></script> <body> <a href="" class="left">left</a> | <a href="" class="right">right</a> <br /><br /> <div id="foo" style="background | |
| 本站网友 昆山电信 | 15分钟前 发表 |
| '0px' }); }); $('.left').click(function(e) { e.preventDefault(); $('#foo').css({ 'right' | |
| 本站网友 沙河大街 | 20分钟前 发表 |
| 'auto' }).animate({ 'right' | |