Jquery unexpected "scale" behavior

Jquery unexpected "scale" behavior

本文关键字:quot behavior scale unexpected Jquery      更新时间:2023-09-26

我有以下内容:

许多有display: block;CSS属性,并将以下两个函数附加到两个按钮上:

function ZoomIn() {
    $("#MainContent_inside_panel a").hide();
    $("#MainContent_inside_panel a").effect("scale", { percent: 200 }, 1000);
    $("#MainContent_inside_panel a").show();
}
function ZoomOut() {
    $("#MainContent_inside_panel a").hide();
    $("#MainContent_inside_panel a").effect("scale", { percent: -200 }, 1000);
    $("#MainContent_inside_panel a").show();

如果我只点击调用缩放的按钮,它会工作(好吧,它不会隐藏所有内容,但这不是什么大不了的事)。如果我点击缩放,然后缩放或者缩放,然后缩放,它就坏了。3/4的块会调整大小,但其他块会变得奇怪(并且不一致地变小)。在firefox中,我可以看到奇怪的小锚,而在chrome中,它们就消失了。

在它"中断"之后,点击任何一个按钮都不起作用。

你知道这是什么原因吗?

编辑:HTML(只是一堆重复的内容):

<a id="MainContent_1_0" class="unused"></a>
<a id="MainContent_400001393" class="used"></a>
<a id="MainContent_1_2" class="unused"></a>
CSS:

.inside_panel a 
{
display: block;
float: left;
width: 7px;
height: 7px;
margin: 2px;
padding: 2px;
border-style: solid;
border-width: 1px;
}
a.used 
{
background-color: red;
}

在收缩对象时不应该使用负值。

如果您希望在对象缩放200%后将其缩小到之前的大小-将其设置为50%。

$("#MainContent_inside_panel a").effect("scale", { percent: 50 }, 1000);

简单的数学:如果对象的大小为100px,那么缩放200%将使其成为200px。要使对象再次变为100px,你应该将它切成两半,也就是50%。