我如何在JQuery中移动div并使用动画效果调整它？ [英] How can I both move a div and resize it with animation effect at JQuery?

问题描述

如何在JQuery中移动div并使用动画效果调整它？

即。 div将位于屏幕的中间，它将向左侧移动，并且在完成移动后将具有其高度的％50和其宽度的％50。（例如，它将具有中间尺寸的％75它的方式）

编辑：我试过了：

  $（。block）。animate（{left： -  = 100px，height： -  = 30％，width： -  = 30％}， 1000）; 
  

然而它消失了？

EDIT2：
这样有效：

  $（。block）。animate（{ left： -  = 100px，height：30％，width：30％}，1000）; 
  

然而，它使我的方块更大，我尝试= -30％但不起作用。我应该做些什么来变小而不是变大？

解决方案

似乎最后一行是将高度和宽度css属性设置为30％。你希望它是以前尺寸的30％，但它实际上是块的最近尺寸父母的30％，这似乎比以前的尺寸大。

<我不认为有一种简单的方法可以调整大小到以前大小的给定百分比（就像动画中的特殊语法一样）。我假设你必须编写一个javascript函数来计算旧的宽度。

鉴于您只想调整一个元素的大小，我强烈建议您使用元素ID而不是其类。然后以下行应该做你想要的：

  $（＃block）。animate（{left： -  = 100px，height：$（＃block）。height（）* 0.5，width：$（＃block）。width（）* 0.5}，1000）; 
  

How can I both move a div and resize it with animation effect at JQuery?

i.e. div will be at the middle of screen and it will go to the left side and will have %50 of its height and %50 of its width after it completed its move.(It will have for example %75 of its size at the middle of its way)

EDIT: I tried that:

$(".block").animate({"left": "-=100px", "height": "-=30%", "width":"-=30%" }, 1000);

However it disappears?

EDIT2: This works:

$(".block").animate({"left": "-=100px", "height": "30%", "width":"30%" }, 1000);

However it makes my square more bigger, I try =-30% but doesn't work. What should I do getting smaller instead of getting bigger?

解决方案

Seems like the last line is setting the height and width css properties to 30%. You expect it to be 30% of the previous sizes, but it actually is 30% of the nearest sized parent of the block, which seems to be larger than the previous size.

I don't think there is a simple way to resize to a given percentage of the previous size (like a special syntax in animate or so). I assume you have to code a javascript function that calculates the new width from the old one.

Given that you only want to resize one element, I strongly suggest that you use the element ID instead of its class. Then the following line should do what you want:

$("#block").animate({"left": "-=100px", "height": $("#block").height()*0.5, "width":$("#block").width()*0.5 }, 1000);

这篇关于我如何在JQuery中移动div并使用动画效果调整它？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！