我有 2 个 div，1 个刚好在屏幕左侧，另一个可见。 div 包含无序列表。现在，当我单击“li”列表项之一时，我想将 div 1 滑到屏幕左侧，并将 div 2 移到屏幕右侧。所以这就是我到目前为止所做的:
<script>
var swap =0;
$("(#cat)li:first").click(function(){
if(swap==0){
$("#cat").animate({"left": "-=150px"}, "slow");
$("#cat2").animate({"left": "+=130px"}, "slow");
swap=1;
}
else{
$("#cat").animate({"left": "+=150px"}, "slow");
$("#cat2").animate({"left": "-=130px"}, "slow");
swap=0;
}
});
</script>
cat 和 cat2 是 2 个 div，其中 cat2 最初位于屏幕左侧。现在它有点工作但不完全是。现在我可以点击屏幕上的任意位置和 2 开关。但是，当我单击列表项时，我该怎么做才能进行交换？
注意:我希望以后能够抓取列表项中的文本来使用，它可能是任何列表项，而不仅仅是第一个。
谢谢
最佳答案
首先，您的 jquery 选择器格式似乎不正确。如果您希望它仅在第一个列表项上触发，请单击然后更改
$("(#cat)li:first")
到
$("#cat li:first, #cat2 li:first")
这表示，对于 div #cat 或 #cat2 中的第一个列表项，执行此操作。你的问题的措辞就好像你想要所有列表项一样，在这种情况下你会想要。
$("#cat li, #cat2 li") or $("li")
示例代码:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript" src='http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.js'></script>
<script type="text/javascript">
$(document).ready(function () {
var swap =0;
$("#cat li, #cat2 li").click(function(){
if(swap==0){
$("#cat").animate({"left": "-=150px"}, "slow");
$("#cat2").animate({"left": "+=130px"}, "slow");
swap=1;
}
else{
$("#cat").animate({"left": "+=150px"}, "slow");
$("#cat2").animate({"left": "-=130px"}, "slow");
swap=0;
}
});
});
</script>
<style>
li { border: 1px solid red; }
#cat { position: absolute; top: 30px; left: 150px; }
#cat2 { position: absolute; top: 60px; left: 0px; }
</style>
</head>
<body>
<div id="cat">
<ul>
<li>a</li>
<li>b</li>
<li>c</li>
<li>d</li>
</ul>
</div>
<div id="cat2">
<ul>
<li>w</li>
<li>x</li>
<li>y</li>
<li>z</li>
</ul>
</div>
</body>
</html>
关于javascript - 在 2 个 div 之间设置动画，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/4381678/