我正在使用下面的代码来为 div 设置动画。
$("i.legend-icon").click(function(){
$(".scatterchartcolumn").animate({width: '-=100px'});
});
我想要 div,只能缩小。但它完全隐藏了 100px 的 div。我不希望这种情况发生。
当我再次点击同一个 div 时,我希望动画停止并且 div 回到默认位置。
这是代码.. 我想停止它并使 .scatterchartcolumn 在我再次单击 i.legend-icon 时具有相同的宽度,因为它是默认的。我还希望动画一直运行到我再次单击 i.legend-icon 为止。目前它会在一秒钟左右停止动画。
HTML
<div class="scatterchartcolumn">
<div id="scattercharty_axis"></div>
<div id="scatterchart"></div>
<div id="scatterchartx_axis"></div>
</div>
CSS
.scatterchartcolumn {
float: left;
display: inline;
margin-left: 25px;
width: 780px;
height: 300px;
}
最佳答案
下面的代码将帮助你做到这一点
$(".legend-icon").click(function () {
if ($(this).attr('id') == "icon1") {
$(".scatterchartcolumn").animate({ width: '-=100px' }, 2500);
$(this).attr('id', 'icon2');
}
else {
$(".scatterchartcolumn").animate({ width: '+=100px' }, 2500);
$(this).attr('id', 'icon1');
}
});
这是工作 fiddle样本
看看这个jqfaq.com站点,它有更多 jquery 相关的常见问题解答。这可能对您有所帮助。
关于javascript - Jquery - 单击时缩小 DIV,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17142700/