2个div之间的动画答案

【问题标题】：Animate between 2 divs2个div之间的动画
【发布时间】：2010-12-08 06:13:03
【问题描述】：

我有 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 是 cat2 最初位于屏幕左侧的 2 个 div。现在它有点工作，但不完全。现在我可以点击屏幕上的任意位置和 2 开关。但是，当我单击列表项时，我该怎么做呢？

注意：我希望以后能够抓取列表项中的文本以使用，它可能是任何列表项，而不仅仅是第一个。

谢谢

【问题讨论】：

标签： javascript jquery css

【解决方案1】：

首先，您的 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>

【讨论】：

是的，因为我想从列表项中获取测试。所以我尝试做 $("#cat li, #cat2 li") 但它只工作一次，当我再次点击时没有任何反应？
听起来您正在引入一个可能会破坏您的脚本的 javascript 错误。我将使用我的完整代码更新我的原始帖子，该代码来回交换列表。
谢谢，我遗漏了 $(document).ready(function () { ... });就我所知，为什么忽略它会有所不同？
document.ready 告诉 jquery 等待，直到 DOM 的所有元素都已加载。这与您可能在 javascript 中看到的 onload 事件不同。他们的网站上有很好的解释。 docs.jquery.com/Tutorials:Introducing_$(document).ready()
为 Firefox 安装 Firebug 或在 Chrome 中按 Ctrl-shift-J，然后当 Javascript 未运行时您会看到错误，它会告诉您原因。

【解决方案2】：

也许你想使用http://jqueryui.com/demos/sortable/

【讨论】：