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）运行HTML文件。这是JSFiddle链接：{{3} }

任何帮助都将不胜感激。

Answer 1

根据文档，jquery.toggle（）用于显示/隐藏元素，它不能像你想要的那样在两个函数之间切换（所以你正在做的是切换元素的可见性，切换在它隐藏之前附带一个缩小的动画，这就是你所看到的）。此外，jquery.transition（）不存在，您可能需要jquery.animate（）。

我已在http://jsfiddle.net/Ue9pu/4/对您的代码进行了更新。我已经改变了，所以切换是通过一个替代的布尔值在内部完成的。现在你只需要正确的动画。

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;
});

使用JQuery .click和.toggle来收缩和扩展同心圆

1 个答案: