>我找到了这个 是否可以使用 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>
您错过了示例代码中最重要的部分:)
$('#anim-shell').css({'position': 'absolute' });
只是一个友好的建议：不要两次查询同一个元素，而是缓存它（在您的情况下它是"#anim-shell"！