查询横幅内的文字

Question

我正在尝试制作 JQuery 横幅。我的代码如下所示：到目前为止，这是我的横幅视频： Banner Youtube

我的代码如下所示：

<html>

<head>
<link rel="stylesheet" type="text/css" href="bannerTest.css">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
    $(document).ready(function()
        {
        $(".banner").animate({height: "300px"}, 600);
        $(".banner").animate({width: "100%"}, 350, function()
           {
            $(".banner-blue").animate({height: "300px"}, 700);
           });

        });
</script>
</head>

<body>

<div class="banner">
    <div class="banner-blue">test

    </div>
</div>

</body>
</html>

CSS:

.banner {
    background:#98bf21;
    height:100px;
    width:300px;
    margin:6px;
}

.banner-blue {
    background:#0000ff;
    position:absolute;
    width: 300px;
}

当左侧的蓝色方块加载后，我想要一些淡入的文本。但我真的很怀疑将它放在代码中的什么位置？在 class: banner-blue 中，我输入了 "test" 这个词。当网站加载时，它说从头开始测试。我在想我必须制作一个脚本，其中文本有延迟吗？如果是这样，我不知道如何将 link 添加到脚本中，因为在同一个 div?[=13 中已经有一个名为 "banner-blue" 的 class =]

希望有人能帮助我。

最好的问候疯狂

Answer 1

如果你想让元素淡入，你必须先隐藏它。

.banner-blue {
    display: none;
    height: 300px;
}

$('.banner-blue').fadeIn(700);

$(document).ready(function() {
  $(".banner").animate({
    height: "300px"
  }, 600);
  $(".banner").animate({
    width: "100%"
  }, 350, function() {
    $(".banner-blue").show().animate({height: '300px'}, 700);
  });

});

.banner {
  background: #98bf21;
  height: 100px;
  width: 300px;
  margin: 6px;
}
.banner-blue {
  background: #0000ff;
  position: absolute;
  width: 300px;
  height: 0px;
  display: none;
  color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="banner">
  <div class="banner-blue">test</div>
</div>

Answer 2

您可以使用 .animate() 函数的回调函数：

jQuery

$(".banner-blue").animate({
    height: "300px"
}, 700, function(){
    $('.hidden').fadeIn(); //fade the text-element in after the animation is completed
});

HTML

 <div class="banner-blue">
     <p class="hidden">test</p> //use any element with a class or ID to reference to your text
 </div>

CSS

.hidden {
    display: none;
}

Demo

Answer 3

Check here

-webkit-animation: blurFadeInOut 3s ease-in backwards;
-moz-animation: blurFadeInOut 3s ease-in backwards;
-ms-animation: blurFadeInOut 3s ease-in backwards;
animation: blurFadeInOut 3s ease-in backwards;

我想这会解决你的问题

查询横幅内的文字

text inside query banner

jquery

banner