Jquery动画和何时函数
Jquery动画和何时函数
提问于 2015-03-13 00:09:31
当我用我的脚本
$(document).ready(function(){
console.log("it started");
swapsies();
});
function swapsies() {
$('.lang').on('click', function(){
console.log("here");
//.when(
$.when(
$(this).animate({ "margin-left": "-=10" }, 500),
$('.active').animate({ "margin-left": "+=10" }, 500)
).done(function(){
console.log("done");
});
});
}这两个元素，这个和active应该移动和切换位置，但只有活动元素是移动的！我不知道，也许是因为这里的等待函数是我的html，所以您可以运行以下命令：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="style.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script type="text/javascript" src="script.js" ></script>
<title>Test swapsies</title>
</head>
<body>
<div id="fied">
<button type="button" id="bb">Click Me!</button>
<div id="swapthis">
<ul>
<li class="active lang"><a href="#">En</a></li>
<li class="lang"><a href="#">Fr</a></li>
<li class="lang"><a href="#">Es</a></li>
</ul>
</div>
</div>
</body>
</html>和css：
li{
display:inline;
background-color: aquamarine;
font-size: 24px;
}
.active{
background-color: blanchedalmond;
}请帮助我弄清楚如何使两个元素移动-一个是被点击的，另一个是使用.active类的。
回答 2
Stack Overflow用户
回答已采纳
发布于 2015-03-13 00:38:16
您应该使您单击的元素向左移动。而不是"-=10“
$(this).animate({ "margin-left": "-=10" }, 500)使用"-=20“
$(this).animate({ "margin-left": "-=20" }, 500)我已经测试了你的密码。事实上，您单击的元素并不是移动的，它显示了代码的确切工作状态。
因为您在向左移动元素10 px (这使它自己向右移动10 px)，然后要求元素向左移动10 px，则使其根本不移动。
但是，由于您可能不希望元素在其右侧移动，所以您也应该处理这些元素的边距。
我像这样修改了你的代码：
$('.lang').on('click', function(){
var dist = 10;
console.log("here");
//.when(
$.when(
$(this).animate({ "margin-left": "-="+dist*2 }, 500),
$(this).next().animate({ "margin-left": "+="+dist }, 500),
$('.active').animate({ "margin-left": "+="+dist }, 500)
).done(function(){
console.log("done");
});
}); 如果您想移动更多的话，请增加dist。
Stack Overflow用户
发布于 2015-03-13 02:39:16
$(document).ready(function() {
console.log("it started");
swapsies();
});
function swapsies() {
$(".lang").on("click", function(e) {
$(e.target)
.parent()
.siblings()
.removeClass("active")
.animate({"left":"0"}, -500)
.end()
.addClass("active")
.animate({"margin-left": "-=10", "left":"0px"}, 500, function() {
$(this).prependTo($(this).parent())
.animate({"margin-left": "+=10", "left":"-=10"}, 500, function() {
$(this).siblings().animate({"left": "0"}, 500)
.promise().then(function() {
console.log("done")
})
})
});
});
}li {
position: relative;
display: inline;
background-color: aquamarine;
font-size: 24px;
padding: calc(0%);
margin-left: calc(0%);
margin-right: calc(0%);
width: calc(1%);
}
.active {
background-color: blanchedalmond;
left:-10px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<div id="fied">
<button type="button" id="bb">Click Me!</button>
<div id="swapthis">
<ul>
<li class="active lang"><a href="#">En</a>
</li>
<li class="lang"><a href="#">Fr</a>
</li>
<li class="lang"><a href="#">Es</a>
</li>
</ul>
</div>
</div>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/29022635
复制相关文章
相似问题
腾讯云开发者
