Question

我有下面的代码，单击列表项时会出现动画。

我遇到的麻烦是再次单击时制作列表项反转动画效果。

我正在尝试将已点击的列表项存储在变量中但由于我的变量从不存储元素详细信息而遇到问题？

可能有更好的方法可以做到这一点，但任何帮助或建议会很棒吗？

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



$('#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

您想要toggle功能：

$('#home ul.circles li').toggle(function() {
    $(this).find('div').stop().animate({opacity: 0, top:'180px'}, 1000 );
},function() {
    $(this).find('div').stop().animate({opacity: 0.8, top:'0'}, 1000 )
});

更新：根据您的评论，此解决方案应该更为可取：

$('#home ul.circles li').click((function(){
    var prevElement = null;
    return function(){            
        //Hiding previously active element
        prevElement && $(prevElement).stop().animate({opacity: 0, top:'180px'}, 1000);

        var curElement = $(this).find('div').get(0);
        $(curElement).stop().animate({opacity: 0.8, top:'0'}, 1000);
        prevElement = curElement;
    };
})());

Answer 2

问题，为什么变量永远不会被调用，因为你在“on click”事件处理程序的范围内定义了一个新变量。你能做什么，是这样的：

在~~全局范围~~中添加此行，并将closure括起来$.ready()：

var testing = null;

并替换此行：

 var testing = $(this).find('div');

用这个：

 testing = $(this).find('div');

但正如评论中所述，您应该使用类来为元素赋予状态。而且您可以使用 .toggleClass（）等功能轻松更改状态。

修改

根据评论中的要求，只有一个人会处于“活跃”状态，这将是一个简单的解决方案：

JavaScript的：

<script> $(document).ready(function () { var circles = $('#home ul.circles li'); var current = 0; circles.click( function(event) { var position = circles.index( $(event.target).parent() ); if ( current != position ) { circles.eq(current).animate( { opacity: 0.5 }, 1000 ); current = position; circles.eq(current).animate( { opacity: 1 }, 1000 ); } event.preventDefault(); }); }); </script>

CSS：

<style> #home ul.circles > li { opacity: 0.5; } #home ul.circles > li.c-1 { opacity: 1.0; } </style>

HTML：

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

Answer 3

一种方法是添加一类clicked

这应该运作良好：

$('#home ul.circles li').click(function() {
    alert(testing);
    if($(this).hasClass('clicked')) {
        $(this).find('div').animate({opacity: 0, top:'180px'}, 1000 );
        $(this).removeClass('clicked');
    } else {
        $(this).find('div').animate({opacity: 0.8, top:'0'}, 1000 );
        $('.clicked').removeClass('clicked');
        $(this).addClass('clicked');
    }
});

jQuery在变量中存储元素

3 个答案: