0

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

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

  1. 我想要 div，只是缩小。但它完全隐藏了 100px 的 div。我不希望这种情况发生。

  2. 当我再次单击同一个 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;
}
4

3 回答 3

2

下面的代码将帮助你做到这一点

$(".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');
       }
   });

这是工作小提琴示例

看看这个jqfaq.com网站，它有更多与 jquery 相关的常见问题解答。它可能对您有帮助。

于 2013-06-17T09:56:50.800 回答
1

我不确定“完全隐藏 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-icon。目前它会在一秒钟左右停止动画......” - 因为它是一个定时动画，所以代码将删除在给定时间段内宽度偏离 100 像素。（如果我们不知道你什么时候要点击按钮，jquery 动画就变得不可能了）。如果你想缩小它直到你点击按钮，你可以让它在更长的时间内缩小到 0px？我不确定你真正想要什么。

更新

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

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

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

于 2013-06-17T08:04:11.937 回答
0

演示

查询：

$(document).ready(function() {
$(".scatterchartcolumn").click(function(){
  $(this).animate({
    width: "0px",
      height:"0px",
  }, 1500 );
});
    });
于 2013-06-17T08:04:29.320 回答