Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
ae galera eu queria saber como animar uma div ao invez de um css segue o codigo
CODE
<html>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="animacao.js"></script>
</head>
<body>
<div id="animado">
<h3>Este é uma DIV animada!!</h3>
</div>
</body>
</html>
<heady>
<style type="text/css"> background: #eee;
}
#animado {
background: #008;
position: absolute;
width: 200px;
height: 200px;
border: 1px solid #00f;
} font-family: Verdana;
}
</style>
<script src="js/jquery-1.4.2.min.js" type="text/javascript">
</script>
<script type="text/javascript">
$(document).ready(function(msg) {
$("#animado").animate({left: 300, top: 400}, 1500);
});
</script>
</heady>
<html>não entendo bem de javascript mais sei que da pra fazer com css agora com div eu não sei oque devo mudar em relaçao a funçao?
$(document).ready(function(msg) {
$("#animado").animate({left: 300, top: 400}, 1500);
});essa funçao move um css mais nao o div alguem ai sabe se tem como e como fazer?
oque quiz dizer é o seguinte que esse código acima move uma imagem produzida pelo css.
oque eu quero é mover uma div com essa funçao:
$(document).ready(function(msg) {
$("#animado").animate({left: 300, top: 400}, 1500);
});sendo que onde é colocado o id do css que é #animado, chamasse uma div com outro nome e nao um css.
razao que eu quero éssa funçao é porque tenho um servidor de socket que quando um usuario cria uma conexao com o servidor cria um div altomaticamente com um id diferente, mais se eu colocar a funçao que pega o id (+u+) dentro da funçao js nao move a div.
sei que o css é uma propriedade da div para atribuir em um quadro(div) coisas como cor domensao e posiçao, mais queria mover a div sem usar o css se é que isso é possivel.
obs: quero mover o div só com seu id, sem as protriedade css.
se eu colocar a funçao que pega o id (+u+) dentro da funçao js nao move a div.
acho que você está fazendo algo errado nesse ponto. Mostre como tentou.
queria mover a div sem usar o css se é que isso é possivel.
impossível.é oque eu disse, qq animação é js manipulando css.
O máximo que dá para você fazer, é encapsular isso:
function move_div( div ){
$( div ).animate({left: 300, top: 400}, 1500);
}
e então você chama:
$(document).ready(function(msg) {
move_div( $("#animado") );
});passando pra função move_div(), um objeto jQuery que aponte para o elemento.
veja o meu projeto quando eu movo o objeto com click do mouse ele move tranquilo mais se eu abrir duas janelas do navegador os aparece duas divs e move os dois nao sei porque você pode me ajudar?
<html>
<head>
<title>HTML5 WebSocket Example with PHP5 Server</title>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript">
var socket;
function dump(data) {
var content = '';
for (user in data) {
if (data[user].position) {
var pos = data[user].position.split(',');
content += '<li class="user"><div class="icon" style="background:' + data[user].color + ';"></div>' + data[user].ip + ': ' + pos[0] + 'x' + pos[1] + '</li>';
$(document).ready(function(msg) {
$(".cursor").animate({left: pos[0], top: pos[1]}, 1500);
});
}
}
$('#console ul').html(content);
} function renderPosition(u, x, y, c) {
if ($('#'+u).length == 0) {
$('<div class="cursor" id="' + u + '"></div>').appendTo('body');
}
// $('#'+u).css('left', x+'px');
// $('#'+u).css('top', y+'px');
// $('#'+u).css('background', c);
} function send(x, y) {
var msg = x + ',' + y;
socket.send(msg);
}//----------------------------------------------------------------------------------------------------------------
function init() {
var host = "ws://localhost:8000/sockethtml5/server.php";
try {
socket = new WebSocket(host);
socket.onopen = function(msg){ };
socket.onmessage = function(msg){
if (msg.data) {
eval('var data = ' + msg.data + ';');
for (user in data) {
if (data[user].position) {
var pos = data[user].position.split(',');
var color = data[user].color;
renderPosition(user, pos[0], pos[1], color);
}
}
dump(data);
}
};
socket.onclose = function(msg){ };
} catch(ex){ alert(ex); }
$('body').click(function(evt){
if (evt.clientX && evt.clientY) {
send(parseInt(evt.clientX), parseInt(evt.clientY));
}
});
}</script>
<style type="text/css">
.cursor { position:absolute; left:0; top:0; width:100px; height:100px; background-image: url(321.gif); background-repeat: no-repeat; }
.icon { float:left; width:10px; height:10px; margin-right:5px; }
#console, #info { font:12px arial,helvetica,sans-serif; margin:20px; padding:20px; background:#f1f1f1; width:250px; }
#console { background:url(http://www.easevents.com/pdacamps/kamila/funny-cat.jpg) no-repeat center center; font-size:10px; height:250px; overflow:auto; }
#console ul { margin:0; padding:0; }
.user { background:#fff; padding:5px; list-style-type:none; }
h1 { font-size:20px; margin:0; }
h2 { margin:0 0 10px 0; }
button { position:absolute; right:0; bottom:0; font-size:20px; padding:5px 10px; margin:40px; }
</style>
</head>
<body id="body" onLoad="init()">
<div id="info">
<h1>HTML5 Websockets Test</h1>
<a href="http://bohuco.net/blog/2010/07/html5-websockets-example/">More Infos at bohuco.net/blog</a>
</div>
<div id="console">
<h2>Current Users ...</h2>
<ul></ul>
</div>
<button onClick="document.location = 'http://bohuco.net/blog/2010/07/html5-websockets-example/';">More Infos »</button>
</body>
</html>se eu clicar na janela a move os dois div se eu cliar na janela b tambem mesmo com ids diferentes.
@ktinho, não crie tópicos repetidos.
o seu outro foi apagado. Leia as regras do forum para uma melhor participação.
muito obrigado voce me ajudou muito dinovo desculpa ter criado tópicos repetidos, soluçao encontrada se voces quiserem usar o código podem ver como ficou abaixo:
<html>
<head>
<title>HTML5 WebSocket Example with PHP5 Server</title>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript">
var socket;
function dump(data) {
var content = '';
for (user in data) {
if (data[user].position) {
var pos = data[user].position.split(',');
content += '<li class="user"><div class="icon" style="background:' + data[user].color + ';"></div>' + data[user].ip + ': ' + pos[0] + 'x' + pos[1] + '</li>';
}
}
$('#console ul').html(content);
}//--------------------------------------------------------------------------------------------------------------
function renderPosition(u, x, y, c) {
if ($('#'+u).length == 0) {
$('<div class="cursor" id="' + u + '"></div>').appendTo('body');
}
$(document).ready(function(evt) {
$('#'+u).animate({left: x, top: y}, 1500);
});
// $('#'+u).css('left', x+'px');
// $('#'+u).css('top', y+'px');
// $('#'+u).css('background', c);
} function send(x, y) {
var msg = x + ',' + y;
socket.send(msg);
}//----------------------------------------------------------------------------------------------------------------
function init() {
var host = "ws://10.1.1.3:8000/sockethtml5/server.php";
try {
socket = new WebSocket(host);
socket.onopen = function(msg){ };
socket.onmessage = function(msg){
if (msg.data) {
eval('var data = ' + msg.data + ';');
for (user in data) {
if (data[user].position) {
var pos = data[user].position.split(',');
var color = data[user].color;
renderPosition(user, pos[0], pos[1], color);
document.getElementById("vx").innerHTML = user;
document.getElementById("vy").innerHTML = pos[1];
}
}
dump(data);
}
};
socket.onclose = function(msg){ };
} catch(ex){ alert(ex); }
$('body').click(function(evt){
if (evt.clientX && evt.clientY) {
send(parseInt(evt.clientX), parseInt(evt.clientY));
}
});
}</script>
<style type="text/css">
.cursor { position:absolute; left:0; top:0; width:100px; height:100px; background-image: url(321.gif); background-repeat: no-repeat; }
.icon { float:left; width:10px; height:10px; margin-right:5px; }
#console, #info { font:12px arial,helvetica,sans-serif; margin:20px; padding:20px; background:#f1f1f1; width:250px; }
#console { background:url(http://www.easevents.com/pdacamps/kamila/funny-cat.jpg) no-repeat center center; font-size:10px; height:250px; overflow:auto; }
#console ul { margin:0; padding:0; }
.user { background:#fff; padding:5px; list-style-type:none; }
h1 { font-size:20px; margin:0; }
h2 { margin:0 0 10px 0; }
button { position:absolute; right:0; bottom:0; font-size:20px; padding:5px 10px; margin:40px; }
</style>
</head>
<body id="body" onLoad="init()">
<div id="info">
<div id="x">X <span id="vx"></span></div><br>
<div id="y">Y <span id="vy"></span></div>
<h1>HTML5 Websockets Test</h1>
<a href="http://bohuco.net/blog/2010/07/html5-websockets-example/">More Infos at bohuco.net/blog</a>
</div>
<div id="console">
<h2>Current Users ...</h2>
<ul></ul>
</div>
<button onClick="document.location = 'http://bohuco.net/blog/2010/07/html5-websockets-example/';">More Infos »</button>
</body>
</html>pode colocar como "resolvido" ate +
>
essa funçao move um css mais nao o div alguem ai sabe se tem como e como fazer?
você fez uma mistura de palavras desconexas nessas frases, não deu pra entender.
Veja, qualquer animação que você faça em páginas web, será manipulando propriedades CSS.
A linguagem que costumamos usar para isso, é javascript, mas ainda assim, não passa de 'js manipulando css'. (DHTML)
a DIV é um elemento HTML, que possui regras CSS aplicadas a ela. Alterando o CSS deste ou de outro elemento, você faz a tua animação.
Entendeu ?
Visto isso, e com estas palavras, as tuas frases não fazem sentido. Explique-se melhor.