代码之家 › 专栏 › 技术社区 › mimelaine

clearInterval在悬停事件中不起作用

clearinterval animation jquery

0

mimelaine · 技术社区 · 10 年前

我无法理解为什么clear interval在我的悬停事件中不起作用:

        <div id="area_list" class="container">
        <div class="row clearfix">
            <div class="col-md-12 column">
                <h2>
                le nostre aree di pratica
                </h2>
                <ul class="list-unstyled list-inline">
                    <li class="first_in_row">
                        <a href="#">
                            <img src="img/list_arrow.png" alt="list_arrow" width="10" height="16" />
                            Lorem ipsum
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img src="img/list_arrow.png" alt="list_arrow" width="10" height="16" />
                            Lorem ipsum
                        </a>
                    </li>
                </ul>
            </div>
        </div>
    </div>

<script>
var move_right;

function movimento_avanti(el) {

    $('a img', el).stop().animate({

        'margin-left' : '4px',
        'margin-right' : '0'

    },500,function() {

        movimento_indietro(el);

        });

}

function movimento_indietro(el) {

    $('a img', el).stop().animate({

        'margin-left' : '0',
        'margin-right' : '4px'

    },500,function() { 

        movimento_avanti(el); 

        });

 }

$(document).ready(function() {

    $('#area_list li').hover(function() {

        move_right = setInterval(movimento_avanti($(this)), 100);

    }, function() {

        clearInterval(move_right);

    });

});
</script>

似乎是我在setInterval中传递的参数造成了一些问题。。。但我需要它只移动悬浮元素。

提前感谢您的帮助。

1 回复 | 直到 10 年前

1

0

Arun P Johny 10 年前

我认为问题不在于间隔时间,试试看

var move_right;

function movimento_avanti($el) {
  $el.find('a img').stop(true).animate({
    'margin-left': '4px',
    'margin-right': '0'
  }, 500, function() {
    if ($el.data('hovered')) {
      movimento_indietro($el);
    }
  });
}

function movimento_indietro($el) {
  $el.find('a img').stop(true).animate({
    'margin-left': '0',
    'margin-right': '4px'
  }, 500, function() {
    if ($el.data('hovered')) {
      movimento_avanti($el);
    }
  });

}

$(document).ready(function() {
  $('#area_list li').hover(function() {
    var $this = $(this);
    $this.data('hovered', true);
    movimento_avanti($this)
  }, function() {
    var $this = $(this);
    $this.data('hovered', false);
    movimento_indietro($this)
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="area_list" class="container">
  <div class="row clearfix">
    <div class="col-md-12 column">
      <h2>
        le nostre aree di pratica
      </h2>
      <ul class="list-unstyled list-inline">
        <li class="first_in_row">
          <a href="#">
            <img src="//placehold.it/10X16" alt="list_arrow" width="10" height="16" />Lorem ipsum
          </a>
        </li>
        <li>
          <a href="#">
            <img src="//placehold.it/10X16" alt="list_arrow" width="10" height="16" />Lorem ipsum
          </a>
        </li>
      </ul>
    </div>
  </div>
</div>