Question

当我点击它时，我希望我的div从55px高度增长到125px高度，然后当我再次点击它时再回到55px。这有点过头了，所以当我点击它时，它会同时增长和缩小。＆GT;。＆LT;

这是我的代码：

       $('div').click(function() {
           $(this).animate({
               height: '125px'
           });
       });
       $('div').click(function() {
           $(this).animate({
               height: '55px'
           }); 
       });

Answer 1

$('div').click(function() {
    $(this).animate({
        height: $(this).height() < 125 ? 125 : 55
    });
});

包含 JavaScript （jQuery）加上更好 CSS 方法： 的 jsFiddle

Answer 2

您可以在该特定元素的单个“click”事件处理程序中调用toggleClass函数。

我使用jsFiddle做了一个示例。

<强> HTML

<body>
    <div class="small">
        Toggle me!
    </div>
</body>

<强> CSS

div.small {
    height: 55px;
}

div.big {
    height: 125px;
}

Javascript（jQuery）

$("div").click( function() {
     $(this).toggleClass("big", 1000);   
});

注意：To be able to provide a second argument“duration”到“toggleClass（）”（整数）来动画类之间的转换，您还需要使用jQuery UI库。 的

Answer 3

对于像审美特征（如height）这样的东西，你应该使用CSS来操纵它。事实证明，它也使jQuery方面的事情变得更容易，因为你可以开启或关闭一个类，例如。

div {
    height : 55px;
}
div.state-enabled {
    height : 125px;
}

// jQuery
$('div').on('click', function () {
     $(this).toggleClass('state-enabled', 'fast');
});

请注意，没有动画功能的.toggleClass()是jQuery开箱即用的;带有动画的.toggleClass()来自于添加jQuery UI lib。这对您来说是height需要动画的，并且可以自动为适当的属性连接适当的动画调用。

Answer 4

您的活动被绑定2次。

$('div').click

的每个实例一个

这就是行为的原因。仅绑定一次事件

var i = 0;
$('div').click(function() {
    i++;
    $(this).animate({
        height: i%2 ===0 ? '125px' : '55px'
    });
});

Answer 5

更好的方法可能是使用CSS类来切换高度并管理转换：

一些HTML：

<div class="toggle-div"></div>

一些CSS：

.toggle-div {
    height: 55px;
    transition: height 1s;
}
.taller { height: 125px; }

现在点击一些javascript：

$('.toggle-div').on('click', function () {
    $(this).toggleClass('taller');
});

JSFiddle演示了这种方法：http://jsfiddle.net/PzxXZ/

有没有办法在初始点击和后来的点击之间区分jQuery？

5 个答案:

我使用jsFiddle做了一个示例。