CODEWITHSUNDEEP
jquery
andreaconsole
andreaconsole

Reputation: 452

jquery animation - move a object from a div to another

I found this Is it possible to move the text from an element to another using jquery animation? that is almost what I was looking for, but what I really cannot do is to obtain a smooth animation during the movement in my little different case. Here the not-so-working example: http://jsbin.com/ofumil/7/edit

The button in the second tab should move from the tab to the upper div (where you see "selected").

Can anybody understand my error? Thanks

<!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>

Upvotes: 0

Views: 3797

Answers (1)

&#193;ron Stankovics
&#193;ron Stankovics

Reputation: 95

You've missed the most important part of the sample code :)

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

And just a friendly advice: do not query the same element twice, cache it instead (in your case it's '#anim-shell'!

Upvotes: 2

Related Questions