Question

我有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开关。但是我如何这样做，所以当我点击列表项时它会进行交换？

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

感谢

Answer 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>

Answer 2

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

两个div之间的动画

2 个答案: