0

当我点击它时，我希望我的 div 从 55px 高度增长到 125px 高度，然后当我再次点击它时又回到 55px 高度。这有点过头了，所以现在当我点击它时，它会同时增长和缩小。>.<

这是我的代码：

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

5 回答 5

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

包含JavaScript ( jQuery) 和更好的 CSS方法： jsFiddle

于 2013-06-06T00:29:35.543 回答
1

对于类似美学特征（如height）的东西，无论如何您都应该使用 CSS 来操作它。事实证明，它也让 jQuery 方面的事情变得更容易，因为例如，您只需打开或关闭一个类即可。

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

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

请注意，.toggleClass()如果没有 jQuery 开箱即用的动画功能；.toggleClass()with 动画来自添加 jQuery UI 库。这适用于height需要动画的您，并自动为您连接相应属性上的相应动画调用。

于 2013-06-06T00:40:14.253 回答
1

您可以在该特定元素的单个“单击”事件处理程序中调用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);   
});

注意：为了能够为“toggleClass()”（一个整数）提供第二个参数“duration”来动画类之间的转换，您还需要使用 jQuery UI 库。

于 2013-06-06T00:28:39.490 回答
0

更好的方法可能是使用 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/

于 2013-06-06T00:30:28.383 回答
0

您的活动被绑定了 2 次。

每个实例一个$('div').click

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

var i = 0;
$('div').click(function() {
    i++;
    $(this).animate({
        height: i%2 ===0 ? '125px' : '55px'
    });
});
于 2013-06-06T00:25:28.390 回答