当前位置: 动力学知识库 > 问答 > 编程问答 >

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>

网友答案:

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

分享给朋友:
您可能感兴趣的文章:
随机阅读: