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

感谢您的回答。我试过你的代码，但是＆＃39; li＆＃39;元素全部移动。我想动画只是在悬停元素上触发。比新代码：

        <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（el）{

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

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

},500,function() {

    movimento_indietro();

    });

}

function movimento_indietro（el）{

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

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

},500,function() { 

    movimento_avanti(); 

    });

}

$（document）.ready（function（）{

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


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

    movimento_avanti($(this));

}, function() {



});

}）;

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

2 个答案: