jQuery：点击放大和移动答案

【问题标题】：jQuery: click to enlarge and movejQuery：点击放大和移动
【发布时间】：2012-05-24 04:36:28
【问题描述】：

我对 jQuery 提出了另一个问题：
所以我有这个代码：

$(document).ready(function(){
$(this).click(function(){
    $("#block1").animate({width:7em,height:7em});
    $("#block2").animate({width:7em,height:7em});
    $("#block3").animate({width:7em,height:7em});
    $("#block4").animate({width:7em,height:7em});
    $("#block5").animate({width:7em,height:7em,function(){
        $(this).animate({width:20em,height:20em,top:4em,left:8em});
    });
});
});

这应该得到一些“便利贴”形状的盒子
1：将所有盒子恢复到原来的位置和大小
2：点击放大时跳出原位进入屏幕中间..
你知道为什么这不起作用吗？（我不想要 css 悬停，但如果有其他方法可以通过 css 做到这一点，我可以接受！！）

【问题讨论】：

为什么要将click 处理程序绑定到文档？
我的第一个问题是您的方法调用不太正确。 .animate({width:7em,height:7em)}; - 括号绕错了。
hehe.. 好吧，我的主要目标是将它绑定到我点击的 5 个块中的任何一个上.. 这样不太好，对，=)
第二个问题是（我认为）您需要将em 放在引号中。
这个链接对你有很大帮助w3schools.com/jquery/tryit.asp?filename=tryjquery_animation

标签： jquery html css jquery-animate

【解决方案1】：

$(document).ready(function(){
  $(this).click(function(){
    $("#block1").animate({width:"7em",height:"7em"});
    $("#block2").animate({width:"7em",height:"7em"});
    $("#block3").animate({width:"7em",height:"7em"});
    $("#block4").animate({width:"7em",height:"7em"});
    $("#block5").animate({width:"7em",height:"7em"},function(){
       $(this).animate({width:"20em",height:"20em",top:"4em",left:"8em"});
    });
  });
});

1) 第 7 行缺少右大括号 "$("#block5").animate({width:"7em",height:"7em" '}' ,function(){"

2) 你还需要包含 jquery 文件

3) 要制作动画，你需要提供大于元素当前高度和宽度的高度和宽度才能看到效果，即超过 7em，因为在 css 中你已经给出了 7em

4) 我在您的 jsFiddle 链接中找到的元素也没有 Id

以上所有点均基于您提供的链接http://jsfiddle.net/q5RwE/2/

【讨论】：

谢谢！！对我的 jsfiddle 中缺少的几件事感到抱歉，你的答案是完美的！ ;) +1 并投票

【解决方案2】：

像这样改变你的代码

.animate({width:"7em",height:"7em"});

【讨论】：