缩放元素不会保持缩放

Question

当我使用jquery将元素缩放50％时，它首先变小，然后返回原始大小。

我猜这是由于切换功能。

$(".target").toggle( "scale", 
          {percent: 50, direction: 'horizontal'}, 2000 );

如何缩放和元素并坚持使用缩放的大小？

我不想使用jquery来应用css类。

Answer 1

我相信你正在使用jquery UI。如果是这样，你必须根据他们的文档重写你的代码：

$(".target").toggle({ 
    effect: "scale", 
    direction: "horizontal",
    percent: 50 ,
    duration: 2000
});

但是，由于toggle最终隐藏/显示元素，因此无法满足您的要求。你需要研究animate。解决此问题的最佳方法是将.target元素包含在另一个div内，然后通过同时提供left和width来设置动画，这会引导您进入正确的方向：

$(".target").animate({
    width: '50%',
    left: '25%'
}, 2000);

为了帮助您，我创建了一个 JS FIDDLE 。看看吧。