jQuery无限改变样式属性

时间:2017-09-06 14:21:01

标签: jquery

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

这项工作,但在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();
        };
      });
    });

你能看到问题吗?我尝试在" 1000)之后添加.stop()"但是动画没有用......

2 个答案:

答案 0 :(得分:0)

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

window.scroll
  1. 此处不需要等待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事件调用的 - 只能在文档准备好后触发。

  2. scroll事件持续触发,因此您在滚动事件的整个过程中反复调用scroll,堆叠重复的动画。 (对于第二次迭代及其后,动画项目的宽度已经位于结束位置,因为第一次迭代离开它的位置;这就是视频中显示的动画仅覆盖子像素范围的原因。)你需要去除滚动事件或以其他方式强制它只发射一次。

  3. 只有一个元素具有ID"技能",所以没有理由在这里循环launchSkills;这最多只匹配一个元素。

  4. 我假设当第一个参数中的元素在视口中时,.each函数返回true?您可以将isVisible直接传递给该函数,而不是在$('#skills')内使用$(this)。 (我不确定为什么第二个参数在那里是必要的,除非你将它用于给定代码中不明显的东西,否则它可能会被删除。)

  5. 最终结果可能如下所示:

    .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处理程序,或将脚本放在文档的末尾)。 )

答案 1 :(得分:-1)

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

我在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>