.animate()一次可以正常工作，但不能两次

Question

首先感谢您的阅读，并为我的英语感到抱歉。

我想做一个动态菜单，你点击图标，然后字段(li)选择动画，以获得更大的宽度。当我点击该字段时，它完美地动画并获得宽度，并且它将其类从"未选中"更改为"选中"。然后，当我再次点击它时，它没有得到它的初始宽度。

JQUERY:

$(document).ready(function(){
    $("li.unselected").on("click",expand);
    $("li.selected").on("click",reduce);
    function expand(){
        $(this).animate({
            width: '150px'
        });
        $(this).removeClass("unselected");
        $(this).addClass("selected");
    }
    function reduce(){
        $(this).animate({
            width: '30px'
        });
        $(this).removeClass("selected");
        $(this).addClass("unselected");
    }
});

PD:我已经检查了HTML代码，因为它的工作和类完美地从"unselected"更改为"selected"，但它不工作的其他方式

Answer 1

如果您将侦听器更改为绑定到文档，则应该可以正常工作:

$(document).on("click","li.unselected", expand);
$(document).on("click","li.selected", reduce);

http://jsfiddle.net/b5PB2/1/

你也可以用css过渡来管理这个:http://jsfiddle.net/b5PB2/

//html    
<ul class="list">
    <li>Something</li>
    <li>Something Else</li>
</ul>
//css
.list li{
    width:30px;
    height:20px;
    overflow:hidden;
    background:#d1d1d1;
    margin-bottom:10px;
    transition: width 0.5s linear;
}
.list li.selected{
   width:150px;
   transition: width 0.5s linear;
}
//basic jquery listener to toggle class
$(document).ready(function(){
    $('.list li').on('click', function(){
        $(this).toggleClass('selected');
    });
});

边注-我使用sass与autoprefixer，所以过渡是自动生成到各种需要的东西，如webkit等。你需要查找css转换在所有浏览器中工作所需的前缀。