Jquery - цикл анимации внутри .hover события

Question

Я не могу понять, почему мой цикл анимации не работает:

 <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> 
    function movimento_avanti() { 
     $('#area_list li a img', this).stop().animate({ 
      'margin-left': '5px', 
      'margin-right': '0' 
     }, 500, function() { 
      movimento_indietro(); 
     }); 
    } 

    function movimento_indietro() { 
     $('#area_list li a img').stop().animate({ 
      'margin-left': '0', 
      'margin-right': '5px' 
     }, 500, function() { 
      movimento_avanti(); 
     }); 
    } 
    $(document).ready(function() { 
     $('#area_list li', this).hover(function() { 
      movimento_avanti(); 
     }, function() { 
     }); 
    }); 
</script> 

Проблема заключается в том, что селекторы внутри funcions, если я ставлю селектор непосредственно в. hover (записывая содержимое функции), он работает. В противном случае, если я ставлю только функцию (например, код, который я написал), это не сработает ... это выглядит так странно для меня ...

Заранее за вашу помощь.

Answer 1

Удалите обе ссылки на this в существующем коде. (DEMO)

Однако, я предполагаю, что вы хотите только анимацию, чтобы вызвать на наведен элемент, а не все изображений? В этом случае вам необходимо передать объект jQuery $(this) между вашими функциями. См пронумерованные комментарии ниже:

Update:

Я попытаюсь объяснить.

1. передать объект JQuery $(this) в качестве параметра к вашей movimento_avanti функции
2. магазина $(this) в переменном с именем el
3. использованием el размаха вашего селектора в наведен элемента
4. Pass хранимой $(this) ссылки на movimento_indietro
5. магазин прошел $(this) в переменной под названием el
6. использование el размаху ваш селектор в наведен элемент
7. Pass хранимую $(this) ссылку обратно movimento_avanti .. Повторяю навсегда

function movimento_avanti(el) { // <-- Passed to here - "el" (2) 
 
    $('a img', el).stop().animate({ // <-- use `el` to scope your selector (3) 
 
     'margin-left': '5px', 
 
     'margin-right': '0' 
 
    }, 500, function() { 
 
     movimento_indietro(el); // <!-- pass along again here - "el" (4) 
 
    }); 
 
} 
 

 
function movimento_indietro(el) { // <-- Passed to here - "el" (5) 
 
    $('a img', el).stop().animate({ // <-- use `el` to scope your selector (6) 
 
     'margin-left': '0', 
 
     'margin-right': '5px' 
 
    }, 500, function() { 
 
     movimento_avanti(el); // <!-- pass along again here - "el" (7) 
 
    }); 
 
} 
 
$(document).ready(function() { 
 
    $('#area_list li').hover(function() { 
 
     movimento_avanti($(this)); // <-- SEE HERE (1) 
 
    }, function() { 
 
    }); 
 
});

<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="http://placehold.it/40x40" alt="list_arrow" width="10" height="16" /> 
 
          Lorem ipsum 
 
         </a> 
 
        </li> 
 
        <li> 
 
         <a href="#"> 
 
          <img src="http://placehold.it/40x40" alt="list_arrow" width="10" height="16" /> 
 
          Lorem ipsum 
 
         </a> 
 
        </li> 
 
       </ul> 
 
      </div> 
 
     </div> 
 
    </div>

анимация будет работать на неопределенный срок , Это то, что вы действительно хотели?

Answer 2

Спасибо за ответ. Я пробовал ваш код, но элементы «li» перемещают все. Я бы активировал анимацию только на парящем элементе. Чем новый код:

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

функции movimento_avanti (El) {

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

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

},500,function() { 

    movimento_indietro(); 

    }); 

}

функции movimento_indietro (El) {

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

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

},500,function() { 

    movimento_avanti(); 

    }); 

}

$ (документ) .ready (функция() {

$('a.rss-item').attr('target', '_blank'); 


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

    movimento_avanti($(this)); 

}, function() { 



}); 

});