Question

我有一系列图片在点击时会展开，但我希望他们在重新点击时返回原来的尺寸。我给图像一个初始类（.images），然后添加了一个类＆＃34;选择＆＃34;。

HTML：

<div class='images'>
    <img src="file:///F|/Desktop/testing new site/sdfs/img/work/Yama/yama1.jpg" width="200" height="150" />
    <img src="file:///F|/Desktop/testing new site/sdfs/img/work/Yama/yama2.jpg" width="200" height="150" />
    <img src="file:///F|/Desktop/testing new site/sdfs/img/work/Yama/yama3.jpg" width="200" height="150" />
</div>

使用Javascript：

$(".images img").click(function () {
    $(".images img").removeClass('images')
    $(this).addClass('selected');
    $(this).animate({
        width: '50%',
        height: '50%'
    }, 50).css('z-index', 999);
});

所以现在图像会正确扩展。我想要删除添加的选定类，以便使用

返回默认的.images图像

  $(".images img").removeClass('active');

但它似乎不起作用。我还是很陌生，所以希望这个解释足够详细。谢谢！

Answer 1

2个选项：

保留一个标记或检查当前类以了解图像是否增长或缩小。然后相应地运行你的动画。
使用会改变大小的类。然后toggleClass点击以增加或缩小备用点击次数。要显示动画，您可以定义transition css属性。因此，无论何时切换类，width属性都不会突然改变，但会显示动画效果。

第二个选项的javascript。

$("img").on("click", function(){
    $(this).toggleClass("selected");
});

See this sample

Answer 2

如果你可以做css过渡，那么你需要的只是

.click(function() {  
      $(this).toggleClass('active) 
})

如果你想坚持使用jquery来制作动画

$(img).click(function(){
    if ( $(this).hasClass('active') {
         // shrink it
         // remove clas
    } else {
         // expand it
         // add class
    }
})

Answer 3

那怎么样。使用动画方法和事件委托

// n
$(".images").on('click','img',function() {
    var $self = $(this);
    $self.toggleClass('selected');

    var width = ($self.hasClass('selected')) ? $self.width() * 2 : $self.width() /2 ;
    var height = ($self.hasClass('selected')) ? $self.height() * 2 : $self.height() /2 ; 

    $self.animate ({ 
        width :  width+'px' , 
        height :  height+'px' 
    },  50 );
});

其他

重新点击图像缩小

3 个答案: