Jquery

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>

问题是函数内部的选择器，如果我将选择器直接放在 .hover 事件中（写入函数的内容），它就可以工作。否则，如果我只放置函数（就像我写的代码）它不起作用......对我来说看起来很奇怪......

在此先感谢您的帮助。

Answer 1

删除现有代码中对 this 的两个引用。 (DEMO)

但是，我假设您只希望动画在悬停元素上触发而不是所有图像？在这种情况下，您需要在函数之间传递 jQuery $(this) 对象。请参阅下面编号的评论：

更新：

我会尽力解释。

将 jQuery $(this) 对象作为参数传递给您的 movimento_avanti 函数
将 $(this) 存储在名为 el
使用 el 将选择器的范围限定为悬停的元素
将存储的 $(this) 引用传递给 movimento_indietro
存储传递给 $(this) 的变量 el
使用 el 将选择器的范围限定为悬停的元素
将存储的 $(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() {



});

});

Jquery - 在 .hover 事件中循环动画

Jquery - loop animation inside .hover event

html

animation