clearInterval doesn't work in a .hover event

Vote count:

0

I can't understand why clear interval doesn't work in my .hover event:

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

It seems is the param I pass in the setInterval to create some problems... but I need it to move just the hovered element.

Thanks in advance for your help.

edited just now

asked 1 min ago

mimelaine

3

clearInterval doesn't work in a .hover event