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>
You’ve missed the most important part of the sample code 🙂
And just a friendly advice: do not query the same element twice, cache it instead (in your case it’s ‘#anim-shell’!