旋转木马选中项目突出显示我们点击它（使用jQuery）

Question

我正在使用Twitter bootstrap carousel，

当用户从旋转木马中选择一个项目并且我想让尺寸更大时，

例如：

我有这样的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>

因此，当用户点击<li>元素时，我想让那个li elemeent width和hightbigger以及其他项目正常，

Answer 1

如果您想要缩放功能，则可以在图像上使用animate功能。

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

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

JSFiddle：http://jsfiddle.net/ud2r4/2/