个人中心
gpt4 book ai didi

javascript - 在 2 个 div 之间设置动画

转载 作者：太空宇宙 更新时间：2023-11-04 16:32:00 25 4
gpt4 key购买 nike

我有 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/

25 4 0
文章推荐： javascript - 为什么bindCallback不是一个函数？
文章推荐： c++ - OpenGL 多边形渲染顺序
文章推荐： javascript - 如何使用 jQuery 删除 html 表格中选定的行？
文章推荐： c++ - 创建类数组
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com