0

私はこれを見つけましたjquery animationを使用して、テキストを要素から別の要素に移動することは可能ですか? それはほとんど私が探していたものですが、私が実際にできないのは、少し異なるケースで移動中にスムーズなアニメーションを取得することです. あまりうまくいかない例: http://jsbin.com/ofumil/7/edit

2 番目のタブのボタンは、タブから上の 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' });

フレンドリーなアドバイス: 同じ要素を 2 回クエリしないで、代わりにキャッシュしてください (あなたの場合は '#anim-shell' です!

于 2012-11-25T20:09:32.453 に答える