Question

鉴于此HTML代码

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

<div id="div2">

</div>

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

Answer 1

你可以尝试这样的事情。

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

Answer 2

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

以下是演示： 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();
});

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设置为目标区域＆amp;将文本插入目标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>

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

6 个答案: