0

我有下面的代码，当单击列表项时会发生动画。

我遇到的问题是再次单击时使列表项反转动画效果。

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

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

 <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');

});
4

3 回答 3

3

你想要切换功能：

$('#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;
    };
})());
于 2012-07-04T19:38:50.733 回答
2

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

将此行添加到全局范围一个封闭的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>
于 2012-07-04T19:39:35.293 回答
0

一种方法是添加一个类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');
    }
});
于 2012-07-04T19:41:27.580 回答