代码之家 › 专栏 › 技术社区 › Mark

如何使用淡入淡出在两个div之间正确切换?

html javascript

Mark · 技术社区 · 6 年前

我正在尝试创建一个示例网站,但我一直停留在按钮可以切换哪个div淡入淡出的部分。编辑:HEV1解决了主要问题,但还有其他几个问题,所以我在这里解决了其他问题。

    <script>
        var activebutton = "None";
        var finished = true;
        var buyInfoShown = false;
        var rentInfoShown = false;
        function BuyInfo() {
            if(!buyInfoShown && finished === true) {
                finished = false;
                $("#RentInfo").fadeOut("slow", function() {
                    $("#BuyInfo").fadeIn("slow")
                    buyInfoShown = true;
                    rentInfoShown = false;
                });
            }
            if(buyInfoShown && finished === true) {
                finished = false;
                $("#BuyInfo").fadeOut("slow");
                buyInfoShown = false;
            }
            finished = true;
        }
        function RentInfo() {
            if(!rentInfoShown && finished === true) {
                finished = false;
                $("#BuyInfo").fadeOut("slow", function() {
                    $("#RentInfo").fadeIn("slow");
                    rentInfoShown = true;
                    buyInfoShown = false;
                });
            }
            if(rentInfoShown && finished === true) {
                finished = false;
                $("#RentInfo").fadeOut("slow");
                rentInfoShown = false;
            }
            finished = true;
        }
    </script>

1 回复 | 直到 6 年前

Unmitigated 6 年前

您需要两个不同的变量来检查 #BuyInfo 和 #RentInfo ,分别。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
    var activebutton = "None";
    var finished = false;
    var buyInfoShown = false;
    var rentInfoShown = false;
    function BuyInfo() {
        if(!buyInfoShown && finished === false) {
            $("#BuyInfo").fadeIn("slow");
            $("#RentInfo").fadeOut("slow");
            buyInfoShown = true;
            rentInfoShown = false;
            finished = true;
        }
        if(buyInfoShown && finished === false) {
            $("#BuyInfo").fadeOut("slow");
            buyInfoShown = false;
            finished = true;
        }
        finished = false;
    }
    function RentInfo() {
        if(!rentInfoShown && finished === false) {
            $("#RentInfo").fadeIn("slow");
            $("#BuyInfo").fadeOut("slow");
            rentInfoShown = true;
            buyInfoShown = false;
            finished = true;
        }
        if(rentInfoShown && finished === false) {
            $("#RentInfo").fadeOut("slow");
           rentInfoShown = false;
            finished = true;
        }
        finished = false;
    }
</script>
    ...
<div class="main" id="pricing">
        <p style="font-size: 28px;">Pricing</p>
        <div class="btn-group">
            <button onclick="BuyInfo()" type="button" class="btn btn-outline-primary btn-lg">Buy</button>
            <button onclick="RentInfo()" type="button" class="btn btn-outline-primary btn-lg">Rent</button>
        </div>
        <div id="BuyInfo" style="display: none;">
            <p style="font-size: 18px;">Product</p>
            <p style="font-size: 14px;">Price</p>
            <p>(Image)</p>
            <a href="link"><button type="button" class="btn btn-success btn-lg">Buy It Now!</button></a>
            <p style="font-size: 20px;"><b>Use code "code" (without quotes) to get a $20 discount!</b></p>
        </div>
        <div id="RentInfo" style="display: none;">
            <p>Rent Info</p>
        </div>
        <p style="height: 120px;"></p>
        <div style="height: 80px; padding: 80px 0px;">
            <p style="font-size: 12px;">Created by HinkerThinker</p>
        </div>
    </div>