사항 clearInterval는 명확 간격이 내 .hover 이벤트에서 작동하지 않는 이유

Question

가 이해 할 수없는 .hover 이벤트에서 작동하지 않습니다

것 같다

 <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을에서 통과 PARAM이 만드는 것입니다 몇 가지 문제가 있습니다 ... 그러나 나는 단지 hove 요소를 움직일 필요가 있습니다.

미리 도움을 주셔서 감사합니다.

Answer 1

나는,

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>