Is it possible to move the text from an element to

2020-07-24 04:51发布

站内问答 / jQuery
1463 6 4

Given this html code

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

<div id="div2">

</div>

Is it possible to animate "Some Text" from div1 to div2? I would like to move just the text rather than the whole element.

标签： jquery
举报
6条回答
太酷不给撩
2楼-- · 2020-07-24 05:09

You can't animate text directly, but you can make it seem that you are animating it. You could hide the destination div and then show it using an animation.

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

http://jsfiddle.net/s9gEk/

查看更多
0人赞 添加讨论(0) 举报
\"骚年 ilove
3楼-- · 2020-07-24 05:09

I'd suggest putting the text in a sub element (maybe a span or something), using jQuery to get the position (offset/coordinates), then set that span to position absolute and the position with the previously mentioned offset, then you can do the animation, with a callback of replacing the div 2's content with the animated content and put position back to normal.

查看更多
0人赞 添加讨论(0) 举报
在下西门庆
4楼-- · 2020-07-24 05:12

that's a little tricky, you could grab the text, pop it into a absolute positioned div with a z-index so it floats over the page, then animate that div to the target area & insert the text into the target div. Here is a rough example off the top of my head. I've tested it and it works well.

<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>
查看更多
0人赞 添加讨论(0) 举报
干净又极端
5楼-- · 2020-07-24 05:22

Sure, though you'll need to create a wrapper to do the animation...

Here's a demo: 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();
});

Here's the play by play explanation...

    // 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();
});
查看更多
0人赞 添加讨论(0) 举报
放我归山
6楼-- · 2020-07-24 05:22

You can try something like this.

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

查看更多
0人赞 添加讨论(0) 举报
做个烂人
7楼-- · 2020-07-24 05:26

You can't really "animate" it... you can take the text and put it into the other div..

Best solution would be to animate the element, maybe animate it then swap the content, then reset the original div?

查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(4)