javascript - 参考点的Animate() div?

  显示原文与译文双语对照的内容
0 0

我有 9个 div,在 3行中。 当我单击它的中一个时,我希望它的他人淡出( 行了,任何问题),然后单击从左。右。上。下移动。 第一行中的第一个 div,因为它位于左上角,但是它们转到左上角,然后调整大小。 然后把div的inside 放在中间。

我正在用 jquery-ui进行试验,而且我非常新的,因这里我不知道它是否可以以复杂。 我谷歌了"参考点的jquery animate()"但我什么都没找到。

谢谢 大家!

 <div id="row1" class="row-fluid">
 <p id="p1" class="hero-unit span4">P número 1</p>
 <p id="p2" class="hero-unit span4">P número 2</p>
 <p id="p3" class="hero-unit span4">P número 3</p>
 </div>
 <div id="row2" class="row-fluid">
 <p id="p4" class="hero-unit span4">P número 4</p>
 <p id="p5" class="hero-unit span4">P número 5</p>
 <p id="p6" class="hero-unit span4">P número 6</p>
 </div>
 <div id="row3" class="row-fluid">
 <p id="p7" class="hero-unit span4">P número 7</p>
 <p id="p8" class="hero-unit span4">P número 8</p>
 <p id="p9" class="hero-unit span4">P número 9</p>
 </div>
 $(document).ready(function() {
 $("p").click(function() {
 current = $(this);
 $("p").not(this).fadeOut(1000, function(){
 current.animate({
 margin:"0px",
 height:"420px",
 width:"940px",
 }, 1000, function(){
 current.removeClass("span4");
 }); 
 });
 });
 });

这就是我所拥有的,非常简单。

时间:原作者:3个回答

0 0

它的原因是在调整大小前跳到左上角的原因是它的他 <p> 将它的display 设置为 none 。 解决方法是将当前 <p> 设置为绝对位置,然后再调整它的大小。

试试这个 !

将HTML封装在具有 relative 定位的Div中:

<div id='container' style="position: relative;">
 <div id="row1" class="row-fluid">
 <p id="p1" class="hero-unit span4">P número 1</p>
 <p id="p2" class="hero-unit span4">P número 2</p>
 <p id="p3" class="hero-unit span4">P número 3</p>
 </div>
 <div id="row2" class="row-fluid">
 <p id="p4" class="hero-unit span4">P número 4</p>
 <p id="p5" class="hero-unit span4">P número 5</p>
 <p id="p6" class="hero-unit span4">P número 6</p>
 </div>
 <div id="row3" class="row-fluid">
 <p id="p7" class="hero-unit span4">P número 7</p>
 <p id="p8" class="hero-unit span4">P número 8</p>
 <p id="p9" class="hero-unit span4">P número 9</p>
 </div>
</div>​​​​​
$(document).ready(function(){
$("p").click(function(){
 current = $(this); 
 var position = current.position();
 $("p").not(this).fadeOut(1000, function(){
//set the current position to absolute with the top and left dimensions the same;
 current.css({
 'postition' : 'absolute',
 'left' : position.left,
 'top' : position.top,
 });
 current.animate({
 margin:"0px",
 height:"420px",
 width:"940px"
 top:"0px",
 left:"0px"
 }, 1000, function(){
 current.removeClass("span4");
 }); 
 });
});
});​

注意,这些都不需要 jQuery.UI.,它将在普通jQuery上工作:)

下面是一个jsfiddle来展示它的作用: http://jsfiddle.net/Fgb9b/1/

enjoy!

原作者:
...