Question

我无法一起运行这两个脚本，是不是语法错误？另外它完美地工作...... 第一个是关于我的进度条，第二个是关于typed.js动画。

此处是代码的链接：https://jsfiddle.net/DATAPIX/m5p200ms/2/

感谢您的帮助。

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

<script>
 jQuery(document).ready(function(){jQuery("#cursor1").show(),jQuery("#screentyped-1").typed({strings:["Hello, my name is XXXX"],stringsstops:[0],typeSpeed:60,callback:function(){jQuery("#typed-cursor").remove(),jQuery("#cursor2").show(),jQuery("#screentyped-2").typed({strings:["I'm XXXXX"],stringsstops:[14,0],typeSpeed:50,callback:function(){jQuery("#typed-cursor").remove(),jQuery("#cursor3").show(),jQuery("#screentyped-3").typed({strings:["Je suis XXXX","Je suis XXXXXXXXXXXX."],stringsstops:[28,0],typeSpeed:50,callback:function(){clearInterval(r),clearInterval(i)}})}})}});var s=jQuery(".animation-element"),o=jQuery(window);o.on("scroll resize",e),o.trigger("scroll");
 
    
var $progress = $(".progress-bar");
var $section = $('.progress-bar');
var $queue = $({});
$(function() {

var $section = $('.progress-bar');

function loadDaBars() {
           $(".progress-element").each(function() {
      var progressBar = $(".progress-bar");
      progressBar.each(function(indx){
          $(this).css("width", $(this).attr("aria-valuenow") + "%");
      });
  });
}

$(document).bind('scroll', function(ev) {
    var scrollOffset = $(document).scrollTop();
    var containerOffset = $section.offset().top - window.innerHeight;
    if (scrollOffset > containerOffset) {
        loadDaBars();
        // unbind event not to load scrolsl again
        $(document).unbind('scroll');
    }
});
});            
 });
</script>

＆＃13;

Answer 1

您正在第一个脚本中关闭准备就绪事件。如果您希望它们在页面准备就绪时运行，那就是它们无法正常工作的原因。

如果你美化了你的第一个脚本（http://jsbeautifier.org/），它看起来像这样：

scala> List("1","2","3").map(x => x.toInt < 2)
res18: List[Boolean] = List(true, false, false)

您需要将结束括号，括号和分号移到jQuery(document).ready(function() { jQuery("#cursor1").show(), jQuery("#screentyped-1").typed({ strings: ["Hello, my name is XXXX"], stringsstops: [0], typeSpeed: 60, callback: function() { jQuery("#typed-cursor").remove(), jQuery("#cursor2").show(), jQuery("#screentyped-2").typed({ strings: ["I'm XXXXX"], stringsstops: [14, 0], typeSpeed: 50, callback: function() { jQuery("#typed-cursor").remove(), jQuery("#cursor3").show(), jQuery("#screentyped-3").typed({ strings: ["Je suis XXXX", "Je suis XXXXXXXXXXXX."], stringsstops: [28, 0], typeSpeed: 50, callback: function() { clearInterval(r), clearInterval(i) } }) } }) } }); var s = jQuery(".animation-element"), o = jQuery(window); o.on("scroll resize", e), o.trigger("scroll");标记的末尾，以便将所有代码合并到ready（）事件中。

Answer 2

我假设您正在尝试使用尚未包含的jQuery库。

在控制台日志中，我得到： Uncaught TypeError: jQuery(...).typed is not a function

谷歌搜索，我发现了这个：https://github.com/mattboldt/typed.js/

尝试将其添加到您的jQuery调用下方的脚本中，然后查看它是否有效。

Answer 3

我已经改变了代码的结尾，这是有效的。谢谢。

 $("#cursor1").show(), $("#screentyped-1").typed({
                strings: ["Hello, my name is XXXX"],
                stringsstops: [0],
                typeSpeed: 60,
                callback: function() {
                    
$("#typed-cursor").remove(), $("#cursor2").show(), $("#screentyped-2").typed({
                        strings: ["I'm XXXXX"],
                        stringsstops: [14, 0],
                        typeSpeed: 50,
                        callback: function() {

$("#typed-cursor").remove(), $("#cursor3").show(), $("#screentyped-3").typed({
                                strings: ["Je suis XXXX", "Je suis XXXXXXXXXXXX."],
                                stringsstops: [28, 0],
                                typeSpeed: 50,
                                callback: function() {
                                    clearInterval(r), clearInterval(i)
                                }
                            })
                        }
                    })
                }
            });
            
            var $progress = $(".progress-bar");
var $section = $('.progress-bar');
var $queue = $({});
$(function() {

var $section = $('.progress-bar');

function loadDaBars() {
           $(".progress-element").each(function() {
      var progressBar = $(".progress-bar");
      progressBar.each(function(indx){
          $(this).css("width", $(this).attr("aria-valuenow") + "%");
      });
  });
}

$(document).bind('scroll', function(ev) {
    var scrollOffset = $(document).scrollTop();
    var containerOffset = $section.offset().top - window.innerHeight;
    if (scrollOffset > containerOffset) {
        loadDaBars();
        // unbind event not to load scrolsl again
        $(document).unbind('scroll');
    }
});
});
            
            
            
            var s = $(".animation-element"),
                o = $(window);
            o.on("scroll resize", e), o.trigger("scroll");

脚本不会一起运行

3 个答案: