个人中心
gpt4 book ai didi

jquery - CSS 过渡在 jQuery 动画之后不起作用？

转载 作者：行者123 更新时间：2023-11-28 07:30:19 26 4
gpt4 key购买 nike

好的，我得到了三个气泡形式的 div。现在我只是在做第一个。他们应该在点击时爆炸，占据几乎整个屏幕，然后在点击标题时回到原来的气泡。这是代码 - 如果您运行它，整个事情将更容易解释:

<!DOCTYPE html>
<html>
    <head>
        <title>KURB - Home</title>
        <link rel="stylesheet" type="text/css" href="kurb.css"/>
        <link href='http://fonts.googleapis.com/css?family=Questrial' rel='stylesheet' type='text/css'>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    </head>
    <body>
        <div id="main">
            <p id="k">KURB</p>
        </div>
        <div id="about">
            <p class="label">Blah blah blah</p>
        </div>
        <div id="work">
            <p class="label">Blah blah blah</p>
        </div>
        <div id="contact">
            <p class="label">Blah blah blah</p>
        </div>

        <script type="text/javascript">
            var main = $("#main");
            var about = $("#about");
            var work = $("#work");
            var contact = $("#contact");

            var open = false;

            about.click(function() {
                about.animate({
                    height: "100vh",
                    marginTop: "0vh",
                    width: "100%",
                    marginLeft: "0%",
                    borderRadius: "0",
                    opacity: "1"
                }, 300);

                main.animate({
                    marginTop: "1vh"
                }, 300);

                about.css("cursor", "auto");
                work.css("display", "none");
                contact.css("display", "none");
                main.css("cursor", "pointer");

                open=true;
            });

            main.click(function() {
                if (open = true) {
                    work.css("display", "inline");
                    contact.css("display", "inline");
                    main.css("cursor", "auto");

                    about.animate({
                        width: "38%",
                        marginLeft: "31%",
                        height: "30vh",
                        marginTop: "7vh",
                        borderRadius: "100%",
                        opacity: "0.6"
                    }, 300);

                    main.animate({
                        marginTop: "10vh"
                    }, 300);

                    about.css("cursor", "pointer");

                    open=false;
                }
            });
        </script>
    </body>
</html>

CSS:

body {
    overflow: hidden;
}

#main {
    float: left;
    width: 20%;
    height: 10vh;
    margin-top: 10vh;
    margin-left: 40%;
    text-align: center;
}

#k {
    font-family: Questrial;
    font-size: 70px;
    margin-top: -7px;
    margin-left: -2px;
    color: #404040;
    border-bottom: 2px solid #404040;
    line-height: 0.85;
}

#about {
    float: left;
    clear: both;
    width: 38%;
    height: 30vh;
    margin-top: 7vh;
    margin-left: 31%;
    text-align: center;
    background-color: #33CC33;
    border-radius: 100%;
    opacity: 0.6;
    transition: opacity .5s, margin-top .5s, margin-bottom .5s;
    -webkit-transition: opacity .5s, margin-top .5s, margin-bottom .5s;
    cursor: pointer;
}

#about:hover {
    opacity: 0.8;
    margin-top: 5vh;
    margin-bottom: 2vh;
}

#work {
    float: left;
    width: 38%;
    height: 30vh;
    margin-top: 0vh;
    margin-left: 10%;
    text-align: center;
    background-color: #323280;
    border-radius: 100%;
    opacity: 0.6;
    transition: opacity .5s, margin-top .5s;
    -webkit-transition: opacity .5s, margin-top .5s;
    cursor: pointer;
}

#work:hover {
    opacity: 0.8;
    margin-top: -2vh;
}

#contact {
    float: right;
    width: 38%;
    height: 30vh;
    margin-top: 0vh;
    margin-right: 10%;
    text-align: center;
    background-color: #FF6600;
    border-radius: 100%;
    opacity: 0.6;
    transition: opacity .5s, margin-top .5s;
    -webkit-transition: opacity .5s, margin-top .5s;
    cursor: pointer;
}

#contact:hover {
    opacity: 0.8;
    margin-top: -2vh;
}

.label {
    font-family: Questrial;
    color: white;
    font-size: 35px;
    margin-top: 80px;
}

现在我已经能够做到这一切了。问题是，之后，应该改变不透明度和 margin-top/margin-bottom 的 CSS 转换似乎不起作用。不透明度根本没有改变，div 也没有向上移动——底部的两个 div 向下移动。我不知道为什么，但我怀疑是因为我以某种方式搞砸了 jQuery 动画。我注意到当 div 为全尺寸时，CSS 过渡被停用。也许他们保持停用状态？ ...帮助？

最佳答案

试试这个:

transition: opacity .5s, margin-top .5s !important;

将 !important 关键字放在样式属性的末尾，它应该在您执行任何 jQuery 相关操作后起作用

我还建议您创建一个函数来执行两个点击事件之间的任何通用功能。添加一些参数(如要设置动画的元素和动画参数)并使用它们提供动画信息:

func animateElement(elementToAnimate, height, width //etc {

 elementToAnimate.animate({
                    height: height,
                    marginTop: "0vh",
                    width: width,
                    marginLeft: "0%",
                    borderRadius: "0",
                    opacity: "1"
                }, 300);

}

关于jquery - CSS 过渡在 jQuery 动画之后不起作用？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31552245/

26 4 0
文章推荐： android - 隐藏WebView中的滚动条
文章推荐： html - 如何在 div block 内将文本(水平和垂直)居中？
文章推荐： c++ - 如何检查一个点是否在透视投影的四边形内？
文章推荐： swift - 当应用程序关闭时，通知 willPresent 不会调用
行者123
个人简介

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

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