Question

更新：我结束了这样做：

<script>
      $(function(){
        $(".typed").typed({
          strings: ["My strings"],
        });
      });
      $(document).ready(function() {
      setTimeout(function() {
        $('<a href="#"><span class="mySpan">Content</span></a>').appendTo('#kick').addClass('animate');
      }, 14000);
    });
    </script>

使用以下CSS：

.animate {
  -webkit-animation-fill-mode: both;
  -moz-animation-fill-mode: both;
  -ms-animation-fill-mode: both;
  -o-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation-delay: 1s;
  -moz-animation-delay: 1s;
  -ms-animation-delay: 1s;
  -o-animation-delay: 1s;
  animation-delay: 1s;
  -webkit-animation-duration: .5s;
  -moz-animation-duration: .5s;
  -ms-animation-duration: .5s;
  -o-animation-duration: .5s;
  animation-duration: .5s;
  -webkit-animation-name: in;
  -moz-animation-name: in;
  -ms-animation-name: in;
  -o-animation-name: in;
  animation-name: in;
}
    @-webkit-keyframes in {
    0%   { opacity: 0; }
    100% { opacity: 1; }
    }
    @-moz-keyframes next {
    0%   { opacity: 0; }
    100% { opacity: 1; }
    }
    @-o-keyframes next {
    0%   { opacity: 0; }
    100% { opacity: 1; }
    }
    @keyframes next {
    0%   { opacity: 0; }
    100% { opacity: 1; }
    }

我已经为超时功能后附加的元素设置了动画。超时允许Typed.js中的另一个函数在执行追加之前完成。

我发现这个post关于动画添加动画，但无法获得Matt Ball提供的任何选项。字符串的下方是Mark Bell的回答，这就是下面的内容。

它有效，动画时机是正确的，但是动画是从左边开始的渐变和淡入 - 我希望附加的元素只是淡入，我不知道如何完成此

这是脚本：

<script>
      $(function(){
        $(".typed").typed({
          strings: ["My strings"],
        });
      });
      $(document).ready(function() {
      setTimeout(function() {
        $('#myDiv').append('<a href="#"><span class="mySpan">Content</span></a>').hide().show('slow');
      }, 14000);
    });
    </script>

Answer 1

您需要在添加元素后添加动画类

$('#myDiv').append('<a 
 href="#"><span
 class="mySpan">Content</span></a>').find('.mySpan').addClass("animation");

Animate jquery附加功能

1 个答案: