jquery動畫 - 將對象從div移動到另一個

我發現這幾乎是我在尋找的Is it possible to move the text from an element to another using jquery animation?，但我真正無法做的是在移動過程中獲得平滑的動畫，在我的小小案例中。這裏的不那麼工作的例子：http://jsbin.com/ofumil/7/edit jquery動畫 - 將對象從div移動到另一個

第二個選項卡中的按鈕應該從標籤移動到上面的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>

來源

2012-11-25 andreaconsole

請在OP中包含相關的HTML/CSS/JS，否則當鏈接死機時這將毫無用處 – Sparky

你已經錯過了示例代碼:)

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

中最重要的組成部分，只是一個友好的建議：不查詢相同的元素兩次，緩存它，而不是（在你的如果它是'＃anim-shell'！

來源

2012-11-25 20:09:32

謝謝，這解決了問題！說實話，我在我的筆記本電腦上試過它，然後發佈到JSbin上，它似乎不工作克...我會再試一次。感謝您的建議。 – andreaconsole

jquery動畫 - 將對象從div移動到另一個

回答

相關問題