是否可以使用jquery动画将文本从元素移动到另一个元素？

鉴于这个HTML代码

 Some Text 
 
  

是否可以将“Some Text”设置为div1到div2？ 我想只移动文本而不是整个元素。

Answer 1

当然，虽然你需要创建一个包装来做动画……

这是一个演示： http ： //jsfiddle.net/TuuvF/1/

 var div2 = $('#div2'); var wrapper = $('#div1') .contents() .wrap($('
').css('position','absolute')) .parent(); wrapper.animate(div2.offset(), 1000, function() { $(this).contents().appendTo(div2); wrapper.remove(); }); 

---

这是戏剧解释的戏剧……

  // reference div2 var div2 = $('#div2'); // reference div1 var wrapper = $('#div1') // grab all of its contents (including text nodes) .contents() // wrap the contents in a generic wrapper div with absolute positioning .wrap($('
').css('position','absolute')) // traverse up to the wrapper div .parent(); // animate the wrapper using the coordinates of div2 provided by .offset() wrapper.animate(div2.offset(), 1000, function() { // in the animation callback, empty the contents into div2 $(this).contents().appendTo(div2); // remove the now empty wrapper wrapper.remove(); }); 

Answer 2

你可以尝试这样的事情。

 $('#div1').slideUp('slow', function(){ var div1Content = $(this).html();//Get div1's content $(this).html('');//Clear div1's content $('#div2') .hide()//Hide div2 .html(div1Content)//Set div2's content .slideDown('slow');//Slidedown to show the content }); 

演示

Answer 3

你不能真正“动画”它……你可以把文本放到另一个div中。

最好的解决方案是动画元素，可能动画然后交换内容，然后重置原始div？

Answer 4

您无法直接为文本制作动画，但您可以将其设置为动画。 您可以隐藏目标div ，然后使用动画显示它。

 var content = $('#div1').html(); $('#div2').hide().html(content).show('slow'); 

http://jsfiddle.net/s9gEk/

Answer 5

我建议将文本放在子元素（可能是一个跨度或其他东西）中，使用jQuery获取位置（偏移/坐标），然后将该跨度设置为绝对位置和前面提到的偏移量的位置，那么你可以做动画，回调用动画内容替换div 2的内容并将位置恢复正常。

Answer 6

这有点棘手，您可以抓取文本，将其弹出到带有z-index的绝对定位div中，使其浮动在页面上，然后将div设置为目标区域并将文本插入目标div。 这是我头顶的一个粗略的例子。 我测试过它，效果很好。

         
test