4

我有一个带有缩略图的画廊。单击一个缩略图时，其宽度将动画并显示完整图像。再次点击它时，它会缩小到原来的大小。我已经通过切换功能实现了这一点，并且效果很好。

问题是，当我单击缩略图时，我希望禁用其他缩略图，但我无法实现。那可能吗？

这是HTML：

<figure class="grid_4 alpha medium"><img class="medium pl pt" src="images/gallery/1.jpg" /><span class="rollover opa2"></span></figure>
<figure class="grid_2 small"><img class="small pr pt" src="images/gallery/4.jpg" /><span class="rollover opa2"></span></figure>
<figure class="grid_4 omega medium"><img class="medium pr pt" src="images/gallery/5.jpg" /><span class="rollover opa2"></span></figure>

这是jQuery：

$('.gallery figure').toggle(function(){
    $(this).find('img').animate({width:620, height:620}, 500, "easeOutExpo");
},function(){
    $('.gallery .medium').animate({width:300, height:300}, 500, "easeOutExpo");
    $('.gallery .small').animate({width:140, height:140, marginTop:0}, 500, "easeOutExpo");
});

我对 jquery 不是很好，所以如果有人能提供任何帮助，我将不胜感激。

非常感谢，杰夫

4

1 回答 1

2

我建议不要抑制切换事件（这会增加开销），而是使用一个简单的标志变量来确定图像当前是否扩展为全尺寸。

请参阅以下演示：http: //jsfiddle.net/adamb/yWSBx/

var flag = false;

$('.foo').click(function() {
    if($(this).hasClass('focus')) {
       ////////shrink image
    }
    else {
        if(!flag) {
            ////////expand image
            flag = true;
        }
    }
});​
于 2012-10-19T15:46:16.427 回答