0

我发现这是否可以使用 jquery 动画将文本从一个元素移动到另一个元素？这几乎是我一直在寻找的，但我真正不能做的是在我的小不同情况下在运动过程中获得平滑的动画。这里不是那么工作的例子：http: //jsbin.com/ofumil/7/edit

第二个选项卡中的按钮应该从选项卡移动到上部 div（您看到“已选择”的位置）。

有人能理解我的错误吗？谢谢

<!DOCTYPE html>
<html>
<head>
  <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js">    </script>
  <!-- <script src="./elgg/vendors/jquery/jquery-1.6.4.min.js"></script> -->
  <script>
    $(document).ready(function() {
      $("#tabs-left").tabs();
      $(".category").click(function(){
        changeDiv('#go', '#fragment-2', '#selicons');
        changedest();
      });
    });


    function changeDiv(what, source_id, target_id)
    {
    var clickedButton = $(what);
    var soff = $(source_id).offset();
    var eoff = $(target_id).offset();
    $('<div id="anim-shell"></div>').appendTo('body');
    $('#anim-shell').css( "background-color","yellow" );
    $('#anim-shell').css( { top: soff.top, left: soff.left } );
    clickedButton.appendTo('#anim-shell');
    $('#anim-shell').animate( { top: eoff.top+'px', left: eoff.left+'px' }, 1500, function() {
        clickedButton.appendTo(target_id)
        $('#anim-shell').remove();

        //$(target_id).text( _text );
    });
}
    function changedest(){
      document.getElementById("dest").href ="nuovohref.html"
    }; 

  </script>
  <style>

    #go{background-image:url('invia.gif');
    background-repeat:no-repeat;
    background-position:center center;
    width:100px;height:44px;
    background-color:0000ff;}
    //vertical tabs
    div#tabs-left {
        position: relative;
        padding-left: 200px;
    }

    div#tabs-left > div {
        min-height: 300px;
    }

    div#tabs-left .ui-tabs-nav {
        position: absolute;
        left: 0px;
        top: 0px;
        bottom: 0px;
        width: 195px;
        padding: 5px 0px 5px 5px;
    }

    div#tabs-left .ui-tabs-nav li {
        left: 0px;
        width: 195px;
        border-right: none;
        overflow: hidden;
        margin-bottom: 2px;
    }

    div#tabs-left .ui-tabs-nav li a {
        float: right;
        width: 100%;
        text-align: right;
    }

    div#tabs-left .ui-tabs-nav li.ui-tabs-selected {
        border: none;
        border-right: solid 1px #fff;
        background: none;
        background-color: #fff;
        width: 200px;
    }

    .content {
    position:relative;
    left:200px;
    background-color: #bcf;
    }
  </style>
</head>
<body >
<div id="selicons">
  <br>
  selected:<br>
  <br>
  <button id="search" >» trova</button>
  <a href="oldlink.htm" id="dest">link</a>
</div>
<div id="tabs-left">
    <ul>
        <li><a href="#fragment-1"><span>One</span></a></li>
        <li><a href="#fragment-2"><span>Two</span></a></li>
        <li><a href="#fragment-3"><span>Three</span></a></li>
    </ul>
    <div class= "content" id="fragment-1">
        <p >First tab is active by default:</p>
    </div>
    <div class= "content" id="fragment-2">
        <button id="go" class="category" style="position: absolute;left:100px;top:20px"></button>
        <button id="go1" class="category" style="position: absolute;left:100px;top:20px"></button>

    </div>
    <div class= "content" id="fragment-3">
        Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
        Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
        Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
    </div>
</div>
</html>
4

1 回答 1

2

您错过了示例代码中最重要的部分 :)

$('#anim-shell').css({'position': 'absolute' });

只是一个友好的建议：不要两次查询同一个元素，而是缓存它（在你的情况下它是'#anim-shell'！

于 2012-11-25T20:09:32.453 回答