Question

我使用以下代码为div设置动画。

$("i.legend-icon").click(function(){
    $(".scatterchartcolumn").animate({width: '-=100px'});
});

我想要div，只是缩小。但它完全隐藏了100px的div。我不希望这种情况发生。
我希望动画停止，并且当我再次点击相同的div时，div会返回到默认位置。

这是代码..当我再次点击i.legend-icon时，我想停止它并使。 scatterchartcolumn 的宽度相同，因为它是默认的。此外，我想要动画运行，直到再次单击 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;
}

Answer 1

下面的代码可以帮助您完成此操作

$(".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相关的常见问题解答。它可能对你有帮助。

Answer 2

我不确定你的意思是“完全隐藏100px的div”，但就切换位而言，你可以这样做：

// cache the selector (don't search the DOM for .scatterchartcolumn on each click)
var col = $(".scatterchartcolumn"); 
var originalWidth = col.width(); // save the width
$("i.legend-icon").click(function(){
    if (col.hasClass("shrunk")) { // check for presence of "shrunk" class
        col.removeClass("shrunk") // toggle the class
            .stop(true, true) // clear the animation queue
            .animate({width: originalWidth});
    } else {
        col.addClass("shrunk")
            .stop(true, true)
            .animate({width: '-=100px'});
    }
});

http://jsfiddle.net/DhpNQ/

至于你的注释：“我希望动画能够运行，直到我再次点击i.legend图标。目前它会在一秒左右停止动画。” - 因为它是一个定时动画，代码是将在给定时间内从宽度上移除100px。（如果我们不知道你什么时候点击按钮，jquery动画就变得不可能了）。如果你想缩小它直到你点击按钮，你可以让它缩短到0px更长的时间吗？我不确定你真正想要的是什么。

更新

为了在更长的时间内制作动画，请给出一个数字（以毫秒为单位）作为.animate（）的第二个参数，如下所示;

 .animate({width: 0}, 10000); // animate to 0 width over 10 000ms

http://jsfiddle.net/DhpNQ/1/

Answer 3

DEMO

JQUERY：

$(document).ready(function() {
$(".scatterchartcolumn").click(function(){
  $(this).animate({
    width: "0px",
      height:"0px",
  }, 1500 );
});
    });

Jquery - 缩小DIV点击

HTML

CSS

3 个答案:

更新