jquery - 使用JQuery .click 和.toggle 收缩和扩大同心圆

Question

我正在尝试使用以下代码在另一个圆上扩展和收缩一个圆:

$(document).ready(function(){
  $("#inner-circle").click(function(){
    $("#inner-circle").toggle(
      function(){
        $(this).transition({ "height":'1.0em',
                             "width":'1.0em',
                             "margin-top":'3.2em',
                             "margin-left":'3.2em'
                            }, 1000);
      },
      function(){
        $(this).transition({ "height":'1.875em',
                             "width":'1.875em',
                             "margin-top":'3.75em',
                             "margin-left":'3.75em'
                            }, 1000);
      }
      )});
});

$(document).ready(function(){
  $("#data1").hover(function(){
    $("#data1").toggle(
      function(){
        $(this).css({"background":"blue"});
      },
      function () {
        $(this).css({"background":"red"});
      },
      function () {
        $(this).css({"background":"orange"});
      });
  });
});

但实际表现出的行为绝对不是我想要的(而且，奇怪的是，无论我是通过 JSFiddle 运行它还是通过我的浏览器 (Firefox) 运行它都会有所不同。这是 JSFiddle 链接:http://jsfiddle.net/Ue9pu/

如有任何帮助，我们将不胜感激。

Answer 1

根据文档，jquery.toggle() 用于显示/隐藏元素，它不能像您预期的那样通过在两个函数之间切换来工作(所以您所做的是切换元素的可见性，切换在它隐藏之前带有一个缩小的动画，这就是你所看到的)。此外，jquery.transition() 不存在，您可能需要 jquery.animate() 代替。

我在这里更新了您的代码 http://jsfiddle.net/Ue9pu/4/ .我已经改变了它，所以切换是通过一个交替的 bool 值在内部完成的。现在您只需要制作正确的动画即可。

var tog = false;
$("#inner-circle").click(function () {
    if (tog) {
        $(this).animate({
            "height": '1.0em',
                "width": '1.0em',
                "margin-top": '3.2em',
                "margin-left": '3.2em'
        }, 1000);
    } else {
        $(this).animate({
            "height": '1.875em',
                "width": '1.875em',
                "margin-top": '3.75em',
                "margin-left": '3.75em'
        }, 1000);
    }
    tog = !tog;
});