1

我正在尝试使用单击事件为列表项中的 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');

});
4

4 回答 4

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而是其中一个的孩子。

于 2012-07-04T14:56:24.537 回答
1

div 在 li 元素内。改为使用.find(..)。

于 2012-07-04T14:57:05.897 回答
0

可能会有很多问题，例如-

  • 您没有将代码保存在 $(document).ready(fn); 中
  • 您尝试制作动画的元素 (div) 没有 position: relative 或 absolute 。
  • 您还可以尝试为 div 设置一些初始不透明度。

创建了一个 jsfiddle 链接，希望对您有所帮助。
jsfiddle

于 2012-07-04T15:11:53.720 回答
0

您可以在选择器中使用“>”来选择 li 元素的直接子元素。这只会选择 div。div里面是否还有另一个div，不会被选中：

$('#home ul.circles li').click(function() {
    $(this).find('>div').animate({opacity: 0.2, top:'0'}, 1500 );
});​​​​​​​​​​​
于 2012-07-04T15:17:43.857 回答