是否有可能使用jQuery動畫將文本從元素移動到另一個元素？

鑑於此HTML代碼是否有可能使用jQuery動畫將文本從元素移動到另一個元素？

<div id="div1"> 
    Some Text 
</div> 

<div id="div2"> 

</div>

是否有可能從動畫DIV1 「一些文本」，以DIV2？我只想移動文本而不是整個元素。

來源

2012-02-05 Fikre

您能否詳細闡述一下您正在嘗試完成的現實生活場景，這裏可能會有更好的解決方案。暫時你可以做什麼德魯在下面提到 – 2012-02-05 21:25:53

那麼我正在建立一個國際象棋的UI。我想通過從一個方塊拖動一塊（一個ASCII文本字符）到另一個方塊來激活對手的動作。我有可拖動和拖放事件掛鉤到容器，所以我想盡可能不要觸摸它們。 ShankarSangoli的回答似乎是最好的選擇，認爲它是我想到的一種不同類型的動畫。 – Fikre 2012-02-05 21:38:25

當然，不過你需要創建一個包裝做動畫...

這裏有一個演示：http://jsfiddle.net/TuuvF/1/

var div2 = $('#div2'); 

var wrapper = $('#div1') 
    .contents() 
    .wrap($('<div>').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($('<div>').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(); 
});

來源

2012-02-05 21:34:12

你不能真正的「動畫」它......你可以把文本，把它放到其他分區..

最好的解決辦法是動畫元素，也許動畫則交換內容，然後重置原始的div？

來源

2012-02-05 21:23:17

其實你可以對它進行動畫處理，以使它看上去仍然是動畫 – ShadowStorm 2012-02-05 21:33:53

這正是我所說的...... – 2012-02-05 22:04:58

你的答案開始於「你不能真正地爲它製作動畫」，當你真的可以爲它製作動畫。他沒有問過動畫文本是否可行，他問他如何從一個元素到另一個元素創建動畫。如果他問「你可以有動畫文字嗎？」你可以寫「你不能真正的動畫」。 – ShadowStorm 2012-02-05 22:15:00

您不能直接爲文字製作動畫，但可以讓它看起來像是動畫。您可以隱藏目的地div，然後使用動畫顯示它。

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

http://jsfiddle.net/s9gEk/

來源

2012-02-05 21:25:42 Jonathan

我建議把文本中的子元素（可能是跨度或東西），使用jQuery來獲取位置（偏移/座標），然後設置跨度絕對定位和前面提到的偏移量的位置，那麼你可以做動畫，回調用動畫內容替換div 2的內容並使位置恢復正常。

來源

2012-02-05 21:25:53 LeonardChallis

你可以嘗試這樣的事情。

$('#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 
});

Demo

來源

2012-02-05 21:28:22 ShankarSangoli

爲什麼要爲此投票？ – ShankarSangoli 2012-02-05 22:01:51

這有點棘手，你可以抓住的文本，彈出到了z-index的一個絕對定位的div所以它漂浮在頁面上，然後進行動畫處理該分區的目標區域&將文本插入到目標div中。這是我頭頂的一個粗略例子。我已經測試過，效果很好。

<html> 
<head> 
<title>index</title> 
<style type="text/css"> 
#anim-shell { 
    z-index: 10; 
    position: absolute; 
    top: 0px; 
    left: 0px; 
} 
</style> 
<script src="jquery-1.7.1.js"></script> 
<script type="text/javascript" language="javascript"> 
$(function($) { 
    setTimeout("animate_text('#div1', '#div2')", 3000); 
}); 

function animate_text(source_id, target_id) 
{ 
    var _text = $(source_id).text(); 
    var soff = $(source_id).offset(); 
    var eoff = $(target_id).offset(); 
    $('<div id="anim-shell"></div>').appendTo('body'); 
    $('#anim-shell').css({ top: soff.top, left: soff.left }); 
    $('#anim-shell').html(_text); 
    $(source_id).text(''); 
    $('#anim-shell').animate({ top: eoff.top+'px', left: eoff.left+'px' }, 400, function() { 
     $('#anim-shell').remove(); 
     $(target_id).text(_text); 
    }); 
} 

</script> 
</head> 
<body> 
<div id="div1" style="height: 20px; width: 30px;">test</div> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<div id="div2" style="background: #ccc; width: 30px; height: 20px"></div> 
</body> 
</html>

來源

2012-02-05 21:29:54 vero

是否有可能使用jQuery動畫將文本從元素移動到另一個元素？

回答

相關問題