jquery动画效果移动div

我想能够添加一个动画到这个简单的查询当div转换到新的位置。jquery动画效果移动div

<div class="container"> 
    <div class="left-side-bar"> 
     <div class="long blue" id="1"> 
      1 
     </div> 
     <div class="short red" id="2"> 
      2 
     </div> 

    </div> 

    <div class='middle-side-bar'> 
     <div class='long green' id="3"> 
      3 
     </div> 

    </div> 

    <div class='right-side-bar'> 
     <div class='short yellow' id="4"> 
      4 
     </div> 
    </div> 

</div>

的CSS

.left-side-bar{ 
    clear: both; 
    width: 32%; 
    text-align: center; 
    float: left; 
    margin-top: 1%; 
    margin-bottom: 100px; 

} 

.middle-side-bar{ 
    width: 32%; 
    text-align: center; 
    float: left; 
    margin: 1% 0 1% 1.6%; 
} 

.right-side-bar{ 
    width: 32%; 
    text-align: center; 
    float: left;  
    margin: 1% 0 1% 1.6%; 
} 

.green { 
    background-color: green; 
} 

.long { 
    height: 300px; 
} 

.short { 
    height: 200px; 
} 

.red { 
    background-color: red; 

} 

.blue { 
    background-color: blue; 
} 

.yellow { 
    background-color: yellow; 
}

基本上我想在div被移到了新地方作为动画过渡，而不是把它简单地出现。

这里是的jsfiddle DEMO

来源

2014-12-29 CYBERSIX

他们应该在哪里移动？你的意思是在页面加载中＃2替换＃4的位置？ – jmore009

一旦屏幕宽度发生变化，但我还没有添加，但.. – CYBERSIX

你的意思是像（例如）这样？ http://jsfiddle.net/4b0868ft/ –

不幸的是，replaceWith方法不能与动画jQuery的工作。相反，您可能需要为您的解决方案找到一种替代方法。这里是一个缓慢地过渡黄色框顶部的红色框... http://jsfiddle.net/aeyg89rd/4/

我添加了以下jQuery，请注意我使用offset（）来获得黄色框的左侧和顶部属性，然后我移动了（）红色框中的左侧和顶部位置使用动画：

$(document).ready(function() { 
    var num4 = $("#4").offset(); 
    $("#2").animate({ top: num4.top, left: num4.left }, 1000); 
});

我改变.red类的一些CSS属性，这样我可以与周围的jQuery代码上面移动它。更具体地说，我把它的位置改为绝对值，并给它一个宽度尺寸：

.red { 
    position: absolute; 
    top: 320px; 
    background-color: red; 
    width: 150px; 
}

来源

2014-12-29 03:39:50 Bolboa

jquery动画效果移动div

回答

相关问题