0

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

$(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 链接：http: //jsfiddle.net /Ue9pu/

任何帮助，将不胜感激。

4

1 回答 1

2

根据文档， 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;
});
于 2013-07-25T18:06:09.497 回答