Question

我已经为我的网站找到了一个能够激活我的酒吧技能的功能。

这项工作，但在Chrome Inspector中，我看到宽度不会停止更改（它在屏幕上看不到，只在检查员中）。

这是我的JS代码：

def login():
    print("====Login====")

    userinfo={}
    with open("userinfo.txt","r") as f:
        for line in f:
            (key,val)=line.split(':')
            userinfo[key]=val.strip()
        print(userinfo)

if __name__ == '__main__':
    login()

这是我的HTML代码：

    function launchSkills(){
      $(document).ready(function() {
        $('.bar span').hide();
        // HTML5
        $('#bar-one').animate({
          width: '95%'
        }, 1000);
        // CSS3
        $('#bar-two').animate({
          width: '85%'
        }, 1000);
        // Javascript
        $('#bar-three').animate({
          width: '30%'
        }, 1000);
        // jQuery
        $('#bar-four').animate({
          width: '40%'
        }, 1000);
        // PHP
        $('#bar-five').animate({
          width: '40%'
        }, 1000);
        setTimeout(function() {
          $('.bar span').fadeIn('slow');
        }, 1000);
      });
    }

    $(window).scroll(function(){
      $('#skills').each(function(){
        if(isVisible($(this), $(window))){
          launchSkills();
        };
      });
    });

你能看到问题吗？我尝试在＆＃34; 1000）之后添加.stop（）＆＃34;但是动画没有用......

Answer 1

主要问题是您没有考虑Array ( [0] => Array ( [extension] => 1000 [name] => Extension 1 ) [1] => Array ( [extension] => 1001 [name] => Extension 2 ) )持续发生的事实，但此处也存在其他一些问题。

window.scroll

此处不需要等待function launchSkills(){ $(document).ready(function() { // This is unnecessary. See (1) below // animation code omitted }); } $(window).scroll(function(){ // This will fire continuously during scroll. See (2) $('#skills').each(function(){ // This is unnecessary. See (3) if(isVisible($(this), $(window))){ // See (4) launchSkills(); }; }); });事件，因为该函数是从document.ready事件调用的 - 只能在文档准备好后触发。
scroll事件持续触发，因此您在滚动事件的整个过程中反复调用scroll，堆叠重复的动画。（对于第二次迭代及其后，动画项目的宽度已经位于结束位置，因为第一次迭代离开它的位置;这就是视频中显示的动画仅覆盖子像素范围的原因。）你需要去除滚动事件或以其他方式强制它只发射一次。
只有一个元素具有ID＆＃34;技能＆＃34;，所以没有理由在这里循环launchSkills;这最多只匹配一个元素。
我假设当第一个参数中的元素在视口中时，.each函数返回true？您可以将isVisible直接传递给该函数，而不是在$('#skills')内使用$(this)。（我不确定为什么第二个参数在那里是必要的，除非你将它用于给定代码中不明显的东西，否则它可能会被删除。）

最终结果可能如下所示：

.each()

如果function launchSkills(){ // animation code here, without the document.ready } /* the event namespace allows you to unbind that event without affecting other functions also bound to window scroll. I've used ".foo" here but it can be anything: */ $(window).on("scroll.foo", function(){ if(isVisible($('#skills'), $(window))){ launchSkills(); $(window).off("scroll.foo"); // stop firing after first successful run }; });在页面加载时在视口内有任何机会，您可以调用#skills强制立即触发上述内容。请注意，如果执行此操作，将需要等待文档就绪（通过使用包含所有脚本的单个document.ready处理程序，或将脚本放在文档的末尾）。）

Answer 2

这就是我用给定代码可以做的事情。

我在document.ready()函数中包含了滚动事件监听器。同样从launchSkills()中移除。

请查看下面的工作片段

  function launchSkills(){
        $('.bar span').hide();
        // HTML5
        $('#bar-one').animate({
          width: '95%'
        }, 1000);
        // CSS3
        $('#bar-two').animate({
          width: '85%'
        }, 1000);
        // Javascript
        $('#bar-three').animate({
          width: '30%'
        }, 1000);
        // jQuery
        $('#bar-four').animate({
          width: '40%'
        }, 1000);
        // PHP
        $('#bar-five').animate({
          width: '40%'
        }, 1000);
        setTimeout(function() {
          $('.bar span').fadeIn('slow');
        }, 1000);
    }
 $(document).ready(function() {
    $(window).scroll(function(){
      
          launchSkills();
    });
    });

.bar{
background-color:blue;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container-fluid">
      <div class="row">
        <h4 class="text-center">Langages</h4>
        <noscript style="position: absolute;top: 75px;left: 180px;">
          Impossible d'afficher l'animation sans JavaScript.
        </noscript>
      </div>

      <div class="row">
        <div class="col-md-2">
          <p>HTML5</p>
        </div>
        <div class="col-md-10">
          <p>
            <span id="bar-one" class="bar" style="width: 94.9995%; overflow: hidden;">s</span>
          </p>
        </div>
      </div>

      <div class="row">
        <div class="col-md-2">
          <p>CSS3</p>
        </div>
        <div class="col-md-10">
          <p>
            <span id="bar-two" class="bar" style="width: 85.0002%; overflow: hidden;">s</span>
          </p>
        </div>
      </div>

      <div class="row">
        <div class="col-md-2">
          <p>Javascript</p>
        </div>
        <div class="col-md-10">
          <p>
            <span id="bar-three" class="bar" style="width: 30.0009%; overflow: hidden;">s</span>
          </p>
        </div>
      </div>

      <div class="row">
        <div class="col-md-2">
          <p>jQuery</p>
        </div>
        <div class="col-md-10">
          <p>
            <span id="bar-four" class="bar" style="width: 39.9988%; overflow: hidden;">s</span>
          </p>
        </div>
      </div>

      <div class="row">
        <div class="col-md-2">
          <p>PHP</p>
        </div>
        <div class="col-md-10">
          <p>
            <span id="bar-five" class="bar" style="width: 39.9997%; overflow: hidden;">s</span>
          </p>
        </div>
      </div>
    </div>

jQuery无限改变样式属性

2 个答案: