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

查看:96
本文介绍了我如何在JQuery中移动div并使用动画效果调整它?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

如何在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屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆