Question

我正在尝试使用点击事件为列表项中的div设置动画，但无法查看代码无效的原因？

当我指定div的直接路径但是我想保留脚本以便它不使用特定的类时它可以工作。

$('#home ul.circles li').click(function() {
    $(this).next('div').animate({opacity: 0.8, top:'0'}, 1500 );
});

HTML

<ul class="circles">
        <li class="c-1"><div class="c-1-active">Text Link</div></li>
        <li class="c-2"></li>
        <li class="c-3"></li>                             
</ul>

我试图扭转效果，但似乎无法存储var的路径？

$('#home ul.circles li').click(function() {
    alert(testing);
    if(testing > "" || testing == $(this).find('div'))
    {
        testing.animate({opacity: 0, top:'180px'}, 1000 );
    }
        $(this).find('div').animate({opacity: 0.8, top:'0'}, 1000 );
        var testing = $(this).find('div');

});

Answer 1

替换：

$(this).next('div').animate({opacity: 0.8, top:'0'}, 1500 );

使用：

$(this).parent().find('div').animate({opacity: 0.8, top:'0'}, 1500 );

或者：

$(this).find('div').animate({opacity: 0.8, top:'0'}, 1500 );

取决于您想要实现的目标。

div不是任何li的兄弟姐妹，而是其中一人的孩子。

Answer 2

div位于li元素内。请改用.find(..)。

Answer 3

可能存在许多问题，例如 -

您没有将代码保存在$（document）.ready（fn）;
您尝试设置动画的元素（div）没有位置：相对或绝对值。
您还可以尝试为div添加一些初始不透明度。

创建一个jsfiddle链接，希望它有所帮助。
jsfiddle

Answer 4

您可以使用'＆gt;'在选择器中，选择li元素的直接子元素。这只会选择div。在div中是否有另一个div，它将不会被选中：

$('#home ul.circles li').click(function() {
    $(this).find('>div').animate({opacity: 0.2, top:'0'}, 1500 );
});

jQuery动画下一个div

4 个答案: