jquery - 内联时如何让 2 个图像出现/消失

Question

我有 2 个对话泡泡，我希望它们首先出现在狗的左侧(蓝色的)，然后 2 秒后棕色的应该出现在狗的右侧。我同时处理许多 CSS 元素，它们相互冲突。

一:3张图片都应该按照显示的顺序对齐(棕色的不够远，为什么？)

二:所有三张图片都应居中(将左右边距设置为自动时遇到问题，建议居中，但它们最终会彼此重叠)。

三: 使用 jQuery，我想淡化左边的蓝色气泡，然后 2 秒后，蓝色的淡出，然后 0.5 秒后右边的棕色的应该淡入。

我遇到的一些问题:- 图像彼此重叠- 当蓝色的一张淡出时，它会将另外两张图像“跳出”位置- 目前棕色气泡不够高

对于上下文，我将 HTML/CSS/jQuery 与 Razor 结合使用。感谢您的帮助。

HTML

    @{
        ViewBag.Title = "Logout";
    }

    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous">
    <link rel="stylesheet" type="text/css" href="~/Content/Login.css" />
    <link rel="stylesheet" type="text/css" href="~/Content/Student.css" />

    <!--
        <script>
        window.setTimeout(function () {
            // Move to a new location or you can do something else
            window.location.href = "../Portal/Login";
        }, 4000);

    </script>

    -->

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script>
        $(function () {
            $(".speech-bubble2").css("display", "none");
            $(".speech-bubble2").delay(2000).fadeIn(500);
            $(".speech-bubble2").css("display", "inline-block");
        });
    </script>


    <div class="background">
        <div class="row text-center">
            <h1 class="student-header" align="center">Later!</h1>
            <div id="studentnavicons">
                <a href="~/Student/Default" title="Store"><i class="fas fa-store-alt"></i></a>
                <a href="~/Student/Community" title="Community"><i class="fas fa-map-signs"></i></a>
                <a href="~/Student/Market" title="Marketplace"><i class="fas fa-shopping-cart"></i></a>
                <a href="~/Student/Avatar" title="Avatar"><i class="fas fa-user"></i></a>
                <a href="~/Portal/Logout" title="Logout"><i class="fas fa-sign-out-alt"></i></a>
            </div>

            <p class="student-text-medium">You are logged out!<br />Redirecting to login screen...</p>
            <div class="dog-container">
                <img class="dog" id="dog-pic" src="~/Content/

img/wasabi.png" />
            <img class="speech-bubble" id="dog-pic" src="~/Content/img/speech-bubble-blue.png" />

            <img class="speech-bubble2" id="dog-pic" src="~/Content/img/speech-bubble-fab.png" />
        </div>
    </div>
</div>

CSS

/*----------------Logout---------------*/
.dog-container {
    position: relative;
    margin-bottom: 550px;
}

    .dog-container .dog {
        position: absolute;
        top: 10px;
        margin-left: 250px;
        margin-right: auto;
        z-index: 0;
    }

.speech-bubble {
    display: inline-block;
    margin-right: 800px;
    width: 400px;

}

.speech-bubble2 {
    margin-left: 1200px;
    width: 400px;
}

/*---------------Logout END-------------*/

Answer 1

使用setInrval函数继续交替隐藏和显示两个对话泡泡的过程。使用标志变量来跟踪要显示或隐藏的气泡。代码将类似于以下内容:

var flag=0;
$('#speech_bubble1').show();
$('#speech_bubble2').hide();

setInterval(function()
{
    if(flag==0)
    {
        $('#speech_bubble1').hide();
        $('#speech_bubble2').show();
        flag=1;
    }
    else
    {
        $('#speech_bubble2').hide();
        $('#speech_bubble2').show();
        flag=0;
    }


},2000);