Question

我有2个气泡，我希望它们首先出现在狗的左侧（蓝色），然后2秒后，棕色的气泡应该出现在狗的右侧。我一次做很多CSS元素，彼此之间存在冲突。

一个： 3张图片应该按照显示的顺序排列（棕色的图片不够远，为什么？）

二：所有三张图片都应居中（将边距左右设置为自动时出现问题，建议居中使用，但它们最终会相互重叠）。< / p>

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

我遇到的一些问题： - 图像在彼此之上 - 当蓝色渐弱时，它会“跳跃”另外两个图像 - 目前棕色气泡不够高

对于上下文，我正在使用Razor的HTML / CSS / jQuery。谢谢你的帮助。

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);

如何在内联时显示/消失2个图像

1 个答案: