天道酬勤,学无止境

逐字动画,加载延迟(Letter by letter animation with delay in loading)

问题

我正在尝试在带有两张幻灯片的部分中实现逐个字母的动画。 目前我正在为此使用 jQuery 代码,但恐怕这远不是理想的选择。
这是我的代码示例:codepen

$.fn.animation = function ()  {
  //get the welcome msg element
  var $message = $(this);
  //get a list of letters from the welcome text
  var $getList = $(this).text().split("");
  //clear the welcome text msg
  $(this).text("");
  //loop through the letters in the list array
  $.each($getList, function(idx, element) {
    //create a span for the letter and set opacity to 0
    var newElement = $("<span/>").text(element).css({
      opacity: 0
    });
    //append it to the welcome message
    newElement.appendTo($message);
    //set the delay on the animation for this element
    newElement.delay(idx * 90);
    //animate the opacity back to full 1
    newElement.animate({
      opacity: 1
    }, 1100);
  });
};

$('.introduction').animation();
$('.secondary').animation();

第一个问题是我做不到,所以第二个带有“secondary”类的句子只有在第一个完成后才运行。 我尝试使用 .delay 和 setTimeout,但这无济于事。
另外,我不确定如何在加载第二张幻灯片时开始动画。
我知道有这些东西的插件,但我想在 vanilla JavaScript、jQuery、css3 中做到这一点。
很高兴得到任何帮助。
是的,这是我希望它看起来如何的一个例子 - http://bootstrapart.net/influence/v1.5.3/
是否可以制作,因此每次更改幻灯片时动画都会开始?
谢谢。

回答1

已编辑

单击此处查看整个代码的工作情况。

我在 css 中所做的更改:我将 html 文本标签( <h1><h3><h4> )的opacity设置为0 ,因此它们被隐藏。 然后在animation函数中它们再次可见。

我在脚本中所做的更改:为了延迟启动第二个文本动画,我使用了setTimeout()函数:

setTimeout(function(){
    $('.secondary').animation();
},2000);

要检测轮播的幻灯片事件,根据 Bootstrap 文档,您可以使用此方法:

$('.carousel').on('slid.bs.carousel', function () {
  // here is where you start the animation for the second slide
})

重新编辑为了跟踪我们在哪张幻灯片上,我引入了一个变量: var $wichSlide 。 以下是更改幻灯片时启动动画的工作方法:

$('.carousel').bind('slid.bs.carousel', function (e) {
    if($whichSlide == 1){
      //set $whichSlide position for the next slide event
      $whichSlide = 2
      //start to animate the text
      $('.introduction').animation();
      setTimeout(function(){
  $('.secondary').animation();
},2000);
      /*set the text on the second slide to be invisible
       * because we don't want it to appear before animation starts
       */
      $('.slide2').css("opacity",0);
    }else if($whichSlide == 2){
      $whichSlide = 1;
      $(".carousel").carousel("pause");
      $(".slide2").animation();
      setTimeout(function(){
       $(".carousel").carousel();
      },3000);
      $('.introduction').css("opacity",0);
      $('.secondary').css("opacity",0);
    }
});

查看工作代码

受限制的 HTML

  • 允许的HTML标签:<a href hreflang> <em> <strong> <cite> <blockquote cite> <code> <ul type> <ol start type> <li> <dl> <dt> <dd> <h2 id> <h3 id> <h4 id> <h5 id> <h6 id>
  • 自动断行和分段。
  • 网页和电子邮件地址自动转换为链接。

相关推荐
  • UILabel的逐字母动画?(Letter by letter animation for UILabel?)
    问题 有没有一种方法可以对UILabel显示的文本进行动画处理。 我希望它逐个字符显示文本值。 与这些人一起帮助我 回答1 Swift 4.1的2018年更新: extension UILabel { func animate(newText: String, characterDelay: TimeInterval) { DispatchQueue.main.async { self.text = "" for (index, character) in newText.enumerated() { DispatchQueue.main.asyncAfter(deadline: .now() + characterDelay * Double(index)) { self.text?.append(character) } } } } } 调用它很简单并且线程安全: myLabel.animate(newText: myLabel.text ?? "May the source be with you", characterDelay: 0.3) @ objC,2012年: 试试这个原型函数: - (void)animateLabelShowText:(NSString*)newText characterDelay:(NSTimeInterval)delay { [self
  • 你所不知道的 CSS 负值技巧与细节
    写本文的起因是,一天在群里有同学说误打误撞下,使用负的 outline-offset 实现了加号。嗯?好奇的我马上也动手尝试了下,到底是如何使用负的 outline-offset 实现加号呢? 使用负值 outline-offset 实现加号 假设我们有这样一个简单的结构: 复制代码 div { width: 200px; height: 200px; outline: 20px solid #000; outline-offset: 10px; } 复制代码 image.png 修改 outline-offset 到一个合适的负值 ,那么在恰当的时候,outline 边框就会向内缩进为一个加号。 经过一番尝试,修改上述 div 的 outline-offset为 -118px。 div { width: 200px; height: 200px; outline: 20px solid #000; outline-offset: -118px; } 复制代码 加个动画效果,大概是这样: image.png CodePen Demo – 使用outline实现加号 很有意思,我尝试了很多不同的情况,最后总结了一个简单的规律,要使用负的 outline-offset 生成一个加号有一些简单的限制: 容器得是个正方形 outline 边框本身的宽度不能太小 outline-offset
  • 如何一次淡入/显示一个字母? [关闭](How to fade in / reveal one letter at a time? [closed])
    问题 关闭。 这个问题需要更加集中。 它目前不接受答案。 想改善这个问题吗? 更新问题,使其仅通过编辑这篇文章来关注一个问题。 5年前关闭。 改进这个问题 当我的网页使用 css 加载时,我希望文本“widget world”出现在顶部,就像有人手动编写一样; 一次出现一封信。 我将使用草书字体。 每个字母出现之间会有几毫秒的延迟。 我想让每个字母成为一个单独的 div,然后一个一个地淡入淡出。 回答1 这是您正在寻找的东西的片段。 p{ color: Pink; font-family: "Courier"; font-size: 20px; margin: 10px 0 0 10px; white-space: nowrap; overflow: hidden; width: 30em; animation: type 4s steps(60, end); } @keyframes type{ from { width: 0; } } <p>Hi folks, this is typing animation using CSS</p> 回答2 这是您将执行的操作的简单示例: var text = 'Widget World'; var textElements = text.split("").map(function(c) { return $('<span id="' +
  • 如何在加载时隐藏动画元素?(How to hide animated elements on load?)
    问题 我在着陆页中使用 animate.css 和 waypoints.js。 我想在用户滚动页面时为元素设置动画。 但是,问题是我需要在动画开始之前隐藏元素(如果我不隐藏,animate.css 首先隐藏元素然后动画,这看起来很丑陋)。 但是,我通过在我的 css 中添加两个类来解决问题,但这又产生了另一个问题。 .visible{ opacity: 1; } .invisible {opacity: 0; } // I added following jquery code $('elem').removeClass('invisible').addClass('visible fadeInUp'); 这很好用,直到我向元素添加animation-delay 。 这是我想要实现的解释。 我有这样的元素: <ul> <li>element1</li> <li>element2</li> <li>element3</li> </ul> 我想为每个元素添加动画延迟,以便它们使用animation-delay属性在每个元素中以指定的秒数fadeInUp 。 我不能让它工作。 我在不使用动画延迟的情况下尝试了以下代码,但没有成功。 $('elem').each(function() { // code with delay using timeout setTimeout
  • 如何在不改变文本大小的情况下为每个字母设置动画(How to animate every single letter without the text size changing)
    问题 我试图让每个字母在悬停时变大。 我得到了那个动画,但我想摆脱整个句子来移动。 我尝试使用绝对定位; 它没有用。 这是jsfiddle。 HTML: <div> <h1> <span id='let-1'>S</span><span id='let-2'>a</span><span id='let-3'>m</span><span id='let-4'>p</span><span id='let-5'>l</span><span id='let-6'>e</span> <span id='let-7'>T</span><span id='let-8'>e</span><span id='let-9'>x</span><span id='let-10'>t</span> </h1> </div> CSS: h1 { text-align: center; } span { font-size: 3em; } div:hover span { animation: .3s letters forwards; } #let-2 { animation-delay: .1s; } #let-3 { animation-delay: .2s; } #let-4 { animation-delay: .3s; } #let-5 { animation-delay: .4s; } #let
  • 加载时有css3过渡动画?(css3 transition animation on load?)
    问题 是否可以在不使用Javascript的情况下在页面加载时使用CSS3过渡动画? 这是我想要的,但是在页面加载时: http://rilwis.googlecode.com/svn/trunk/demo/image-slider.html 我到目前为止发现的 CSS3过渡延迟,一种延迟对元素的影响的方法。 仅适用于悬停。 CSS3关键帧可在加载时工作,但运行速度极慢。 因此没有用。 CSS3过渡足够快,但不会在页面加载时进行动画处理。 回答1 您可以在页面加载时运行CSS动画,而无需使用任何JavaScript; 您只需要使用CSS3关键帧即可。 让我们看一个例子... 这是一个仅使用CSS3滑动到位的导航菜单的演示: @keyframes slideInFromLeft { 0% { transform: translateX(-100%); } 100% { transform: translateX(0); } } header { /* This section calls the slideInFromLeft animation we defined above */ animation: 1s ease-out 0s 1 slideInFromLeft; background: #333; padding: 30px; } /* Added for
  • 使用 JQuery 淡入字符串字符?(Fade In String Characters with JQuery?)
    问题 这是我的代码。 出于某种原因,整个字符串一次淡入,而不是每个单独的字符。 我的console.log 显示字符正在被一一执行。 为什么整个字符串一次淡入? for 循环中的语句不应该为每个字符执行吗? <!DOCTYPE html> <head> <script src="jquery.js" type="text/javascript" charset="utf-8"></script> <script> $(function() { string = " David"; for(i = 0; i < string.length; i++) { $('#fadeIn').append(string[i]).delay(1000).hide().fadeIn(1000); console.log(string[i]); } }); </script> </head> <body> <div id="fadeIn" style="color: #000"></div> </body> </html> 回答1 为了让单个字母淡入,它们需要是 DOM 元素。 $(function() { var string = " David"; var q = jQuery.map(string.split(''), function (letter) { return $('<span>'
  • 网站加载页面(HTML+CSS+JS,简易版)
    一、概述本张页面由我做的一个个人网站而来,静态页面,编码简单,希望对你有用。不喜勿喷,感谢。废话不多说,直接上图。(注:进度条可以参考参考!)二、代码HTML部分网站小图标!<html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="Refresh" content="5.5;URL=second.html"> <link rel="shortcut icon" href="./img/logo.png" type="image/x-icon"> <link rel="stylesheet" href="./css/buffer.css" type="text/css"> <script src="./js/buffer.js">script> <title>Buffertitle>head><body> <div class="box"> <div class="head"> <img src="./img/buffer.png"> <div class="shadow"> <span>span> div> <div class="load"> <p>Loadingp>
  • Letter by letter animation with delay in loading
    I'm trying to implement letter by letter animation on section with two slides. Currently I'm using jQuery code for that, but I'm afraid it's far from the ideal option. Here's my code example: codepen $.fn.animation = function () { //get the welcome msg element var $message = $(this); //get a list of letters from the welcome text var $getList = $(this).text().split(""); //clear the welcome text msg $(this).text(""); //loop through the letters in the list array $.each($getList, function(idx, element) { //create a span for the letter and set opacity to 0 var newElement = $("<span/>").text(element
  • 角度ng-if或ng-show响应缓慢(2秒延迟?)(angular ng-if or ng-show responds slow (2second delay?))
    问题 我正在尝试在请求繁忙时在按钮上显示或隐藏加载指示器。 我通过在加载请求或加载完成后更改$ scope.loading变量来实现此目的。 $scope.login = function(){ $scope.loading = true; apiFactory.getToken() .success(function(data){ }) .error(function(error){ }) .finally(function(){ $timeout(function() { $scope.loading = false; }, 0); }); }; 在前端: <button ng-disabled="loading" class="button button-outline button-positive" type="submit"> Log in <span ng-if="loading" class="ion-refreshing"></span> </button> 这可以正常工作,但是加载图标(离子刷新)显示约2秒钟,而$ scope变量会立即更新。 我尝试了$ scope。$ apply,但这似乎不是这里的问题,作用域可以在请求后立即更新。 只是图标没有足够快地响应。 感谢您帮助我理解这一点! 回答1 如果不从应用程序配置和index
  • Android - 延迟加载图像(Android - Loading images with a delay)
    问题 我试图伪造某种进度条。 我有 X 个图像并希望ImageView以一定的延迟显示它们。 我试图做这样的事情: for(i=2;i<X;i++) { Handler handler = new Handler(); handler.postDelayed(new Runnable() { @Override public void run() { drawable = getResources().getDrawable(getResources() .getIdentifier("img_"+i, "drawable", getPackageName())); imgPayment.setImageDrawable(drawable); }}, DELAY); } 但是 for 循环不会等待run()结束。 我只看到第一个和最后一个图像。 我尝试了其他一些事情,但无法获得预期的结果。 回答1 为什么不使用 Animation Drawable? 您似乎没有动态加载图像。 <animation-list android:id="@+id/selected" android:oneshot="false"> <item android:drawable="@drawable/wheel0" android:duration="50" /> <item android
  • 鸿蒙开源第三方组件的迁移——加载动画库
    前言 基于安卓平台的加载动画库AVLoadingIndicatorView(https://github.com/81813780/AVLoadingIndicatorView),实现了鸿蒙化迁移和重构,代码已经开源到(https://gitee.com/iscas-ohos/avloading-indicator-view_ohos.git),欢迎各位下载使用并提出宝贵意见! 背景 服务器在加载数据的时候有时需要等待一段时间,加载动画可以缓解用户等待过程中的焦虑情绪,使等待过程变得更加友好、流畅。AVLoadingIndicatorView是一个开源的加载动画库,通过动画库的调用,可以实现各种各样的加载效果。组件功能展示 1. 动画效果 在原Android版本中,本组件库里共有28个加载动画,鸿蒙版本的组件库成功实现其中21种动画效果。由于鸿蒙系统部分API功能缺失,目前有7个动画效果未成功迁移。 图1 AVLoadingIndicatorView效果示意图 图1所示为鸿蒙平台的AVLoadingIndicatorView的动画效果展示,可分为6行4列,动画效果的对应名称(从左至右)如下:Row 1BallPulseIndicator,BallGridPulseIndicator,BallClipRotateIndicator
  • 为什么 svg 上的转换不能立即在 DOMContentLoaded 上工作?(Why don't transitions on svg work on DOMContentLoaded without delay?)
    问题 我有一个设置了过渡的 svg。 现在,当我向它添加一个具有某些属性变化的类时,只有在 DOMContentLoaded 事件和 addclass 事件之间添加延迟时才会发生转换。 这里有两个例子,第一个没有延迟,第二个是无限小的延迟: 不延误: ! function() { window.addEventListener('DOMContentLoaded', function() { var logo2 = document.querySelector("svg"); logo2.classList.add('start'); }); }(); <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 104.75 32.46"> <defs> <style> polygon { fill: red; transition: opacity 3s ease-out, transform 3s ease-out; opacity: 0; } .start polygon { opacity: 1; } #A1 polygon { transform: translate(100px, 100px); transition-delay: 1s; } /*styles after animation starts*/ .start
  • css
    设置字符间距 letter-spacing:2px; 设置单词间距 word-spacing:30px; 文字自动换行 white-space:pre; //类似html中的<pre> white-space:pre-wrap; //文本超出自动换行 white-space: nowrap; //文本不换行 过长单词处理 word-wrap:break-word; //与上个单词后面留白 word-break:break-all; //与上个单词后面不留白,单词折行 上划线,下划线,删除线 text-decoration:overline //上划线 text-decoration:underline //下划线 text-decoration:line-throughs //删除线 text-decoration:none; //取消下划线 首行缩进 text-indent:50px; 文本大小写 text-transform:capitalize; //首字母大写 text-transform:uppercase; //全部大写 text-transform:lowercase; //全部小写 文本溢出处理 display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow
  • 动画 CSS 下划线延迟(Animated CSS underline on delay)
    问题 我正在尝试动画(从左到右)带有页面加载转换延迟的下划线。 我知道如何让它在悬停时工作,而不是在加载时。 尝试这样的事情,但不确定为什么它不起作用。 .under { position: relative; text-decoration: none; display: inline-block; } .under::after { content: ""; position: absolute; width: 100%; height: 2px; bottom: 0; left: 0; background-color: #000; -webkit-transition-delay: 2s; transition-delay: 2s; -webkit-transition: all 0.3s ease-in-out 0s; transition: all 0.3s ease-in-out 0s; } 回答1 在尝试实现您正在寻找的效果时,有两件事需要注意: text-decoration属性不能被动画化,使得下划线从左到右。 CSS transition仅在状态发生变化时才会触发(由于悬停、单击等用户交互或由于 setTimeout 等 JavaScript)。 如果您需要在页面加载时发生动画,那么您应该使用带有@keyframes规则的 CSS animation 。
  • 修复Java中动画gif的帧频(fix frame rate of animated gif in Java)
    问题 我正在制作一个Java应用程序,该应用程序显示文件夹中的某些GIF文件。 我目前正在使用代码 final JLabel imageLabel = new JLabel(); imageLabel.setIcon(new ImageIcon(fileName)); contentPane.add(imageLabel, java.awt.BorderLayout.CENTER); 除非我的许多(G)文件.GIF文件的帧速率配置错误,使它们以无限的速度显示(frameDelay = 0),并且假定浏览器会自动修复,否则,它可以完美工作。 Java默认情况下不执行此操作。 如何覆盖frameDelay = 0的Java动画gif必须使用的frameDelay? 回答1 我已经找到了,并且很适合我尝试过的一个gif。 我不知道他到底在做什么,但是乍一看,如果第一帧的延迟为0,它将覆盖所有帧的延迟,即为10。然后,他在内存中“写入”一个新的GIF文件并将其加载到图像。 [编辑]我将它擦亮了一点,并消除了这些错误。 没有专有的API 不仅检查第一帧以确定它是否有错误, 仅将延迟替换为零的帧。 public static Image readImgFromFile(String filename, Component parent) { File file = new File
  • 在页面加载时继续 CSS 动画?(Continue CSS animation on page load?)
    问题 我希望我的 header.php 中元素的 CSS 动画能够在不同的页面上顺利进行。 所以如果我有一个 200 秒的循环动画和 80 秒在我点击关于我们页面的动画在页面加载时仍然是 80 秒? 这甚至可能吗,如果是这样,如何? 谢谢。 回答1 如果它是某种关键帧动画,您可以这样做: CSS @keyframes colorchange { 0% {background: red;} 50% {background: green;} 100% {background: yellow;} } div { width: 100px; height: 100px; background: red; -webkit-animation: colorchange 5s linear infinite; animation: colorchange 5s linear infinite; -moz-animation: colorchange 5s linear infinite; } JS $(document).ready(function(){ var animationTime=0; var intId = setInterval(function(){ animationTime++; },1000); var postTime = function(link){ $.ajax(
  • 动画图像数组中的滞后(Lag in animated image array)
    问题 我正在制作由不断变化的图像数组(基于此)制成的循环动画(如动画 GIF)。动画通过不断变化的图像类前进。 这是我目前所拥有的: function animateEverything() { var imgc = 0; var frame1 = $('.start').attr('src'); var frame2 = $('.start').prev().attr('src'); var frame3 = $('.start').prev().prev().attr('src'); var frame4 = $('.start').prev().prev().prev().attr('src'); var frame5 = $('.start').prev().prev().prev().prev().attr('src'); var images = [frame1,frame2,frame3,frame4,frame5]; $("#ball").html("<img src='" +images[0] +"'>").show() setTimeout(setImage, 50); function setImage() { var next=new Image() images.push(images.shift()) next.onload=function(){ $(
  • 如何使用 SCSS/SASS 增加并发 div 的动画延迟(How to use SCSS/SASS to increase animation-delay for concurrent divs)
    问题 我正在尝试复制 Windows 8 磁贴的加载动画。 似乎每个图块都有一个动画延迟,略高于其前身。 我目前通过以低效的方式使用 nth-child 来实现这一点,如下所示。 有谁知道我可以以更有效的方式实现这一目标的方法,以满足任意数量的 div? 演示 .results div:nth-child(1) { animation-delay: 0.25s; } .results div:nth-child(2) { animation-delay: 0.5s; } .results div:nth-child(3) { animation-delay: 0.75s; } .results div:nth-child(4) { animation-delay: 1s; } .results div:nth-child(5) { animation-delay: 1.25s; } .results div:nth-child(6) { animation-delay: 1.5s; } .results div:nth-child(7) { animation-delay: 1.75s; } .results div:nth-child(8) { animation-delay: 2s; } 回答1 您可以在 Sass 中使用 for 循环来执行此操作,如下所示: @for $i
  • 为什么 animateWithDuration 动画和完成块之间的暂停?(Why the pause between animateWithDuration animation and completion blocks?)
    问题 按照 Apple 的建议,我通过将后续调用-animationWithDuration:animation:在completion: block of another call to aanimateWithDuration:animation:completion:来链接 UIView 动画,如下所示: [UIView animateWithDuration:scaleDuration delay:0 options:UIViewAnimationOptionCurveEaseIn animations:^{ // Scale the controllers' views down. self.view.transform = CGAffineTransformScale(self.view.transform, 0.8, 0.8); } completion:^(BOOL finished) { // Transition to the new view and push on the new view controller. [UIView transitionWithView:self.view duration:1 options:UIViewAnimationOptionCurveLinear |