jQuery将div动画到每个角，以跳动的动画和“固定"元素结尾 [英] jQuery animating div to each corner ends in jumpy animation and 'fixed' element

问题描述

链接: http://jsfiddle.net/kbJCc/1/

不幸的是，现在我什至无法使用jquery执行最简单的动画. 我有一个分为4个按钮的二次div.每个按钮代表屏幕的一个角.因此，如果按btn1，我的Quaddiv div应该设置为左上角的动画. btn2应该使div动画到右上角. btn3左下角.

Unfortunately I can't even perform the most simple animation with jquery right now. I've got a quadratic div separated in 4 buttons. Each button represents one corner of my screen. So if I press btn1 my quadrativ div should animate to the upper-left corner. btn2 should animate the div to the upper-right. btn3 bottom left a.s.o.

现在有两个问题: 1. Safari和amp;中的动画不流畅镀铬(它从一个角跳到另一个角) 2.如果单击全部(在上一个动画之后单击一个)，则div卡在左上角.

Now there are two problems: 1. animation is not smooth in safari & chrome (it jumps from one corner to an other) 2. If I have clicked all (one after the previous animation) the div is stuck in the upper left corner.

Firebug告诉我，我的div保留了$ .animate()应用的所有css规则?！

Firebug told me that my div keeps all of the css rules applied by $.animate()?!

希望这里有人可以帮助我.

Hopefully someone out here can help me.

非常感谢您.

顺便说一句. div最初应该位于我的窗口中心:)

Btw. the div initially should have been centered on my window :)

推荐答案

我已经更新了您的jsfiddle .基本上，我给出了包含main-menu静态尺寸的元素，以便JavaScript可以从中计算位置.然后，一旦DOM准备就绪，我便通过JavaScript将main-menu元素初始化为文档的中心"(从技术上讲，这可以并且应该在样式表中完成).最后，我更新了您的动画以显式设置main-menu元素的所有侧面的动画.

I have updated your jsfiddle. Basically, I gave the element containing main-menu static dimensions so that the JavaScript has something from which to calculate positions. I then initialized the main-menu element to the "center" of the document via JavaScript once the DOM is ready (technically, this could, and should, be done in the stylesheet). Finally, I updated your animations to explicitly animate all sides of the main-menu element.

这篇关于jQuery将div动画到每个角，以跳动的动画和“固定"元素结尾的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！