Javascript 单击所选项目时，旋转所选项目高亮显示（使用jQuery）

我正在使用twitter引导旋转木马

当用户从旋转木马中选择一个项目时，我想使其尺寸变大

例如：

我有如下html：

<ul class="thumbnails" data-bind="foreach: AchievementItem">
    <li class="span3">
        <div class="thumbnail" tabindex="1">
            <div data-bind="click: $root.GetAchievement">
                <img data-bind="attr: { src: ImageFileName, id: 'thumbnail' + Soid }" src="../Images/DefaultPhoto.png" id="thumbnail521dfe57d94eaf0900bf5355">
            </div>
            <img src="../Images/trashIcon.png" class="trash" data-bind="attr: { id: 'trash' + Soid }, click: $root.DeleteAchievement" id="trash521dfe57d94eaf0900bf5355">
        </div>
        <div class="caption">
             <h5 data-bind="attr: { title: Title, id: 'caption' + Soid }, text: Title" title="Achievement 005" id="caption521dfe57d94eaf0900bf5355">Achievement 005</h5>

        </div>
    </li>
    <li class="span3">
        <div class="thumbnail" tabindex="1">
            <div data-bind="click: $root.GetAchievement">
                <img data-bind="attr: { src: ImageFileName, id: 'thumbnail' + Soid }" src="../Images/DefaultPhoto.png" id="thumbnail521dfe56d94eaf0900bf5354">
            </div>
            <img src="../Images/trashIcon.png" class="trash" data-bind="attr: { id: 'trash' + Soid }, click: $root.DeleteAchievement" id="trash521dfe56d94eaf0900bf5354">
        </div>
        <div class="caption">
             <h5 data-bind="attr: { title: Title, id: 'caption' + Soid }, text: Title" title="Achievement 004" id="caption521dfe56d94eaf0900bf5354">Achievement 004</h5>

        </div>
    </li>
    <li class="span3">
        <div class="thumbnail" tabindex="1">
            <div data-bind="click: $root.GetAchievement">
                <img data-bind="attr: { src: ImageFileName, id: 'thumbnail' + Soid }" src="../Images/DefaultPhoto.png" id="thumbnail521dfe56d94eaf0900bf5353">
            </div>
            <img src="../Images/trashIcon.png" class="trash" data-bind="attr: { id: 'trash' + Soid }, click: $root.DeleteAchievement" id="trash521dfe56d94eaf0900bf5353">
        </div>
        <div class="caption">
             <h5 data-bind="attr: { title: Title, id: 'caption' + Soid }, text: Title" title="Achievement 003" id="caption521dfe56d94eaf0900bf5353">Achievement 003</h5>

        </div>
    </li>
</ul>

成就005


成就004


成就003

---

因此，当用户单击

元素时，我想使li元素的宽度和高度以及其他项目正常，

如果您想要缩放功能，那么您可以在图像上使用

动画功能

$("img").click(function() {
    //Normalize all <li>
    $("img").animate({width: "150px", height: "50px"}, "slow");

    //Make clicked <li> larger
    $(this).animate({width:"50%", height:"50%"}, "slow");
});

$（“img”）。单击（函数（）{
//规范化所有

$（“img”）.animate（{宽度：“150px”，高度：“50px”），slow）；
//使单击的
变大
制作动画（{宽度：“50%”，高度：“50%”，}，“慢”）；
});

JSFIDLE:
我想为缩放添加一些动画！：（更改了我的答案。不过下次您应该指定细节，因为最初您只是说增加高度和宽度，而不是希望它缩放。）。