Snap.svg совсем не очень?

Question

[Antomas]

var s = Snap("#svg");
var ball = s.circle(150, 150, 15);
ball.attr({
fill:"red",
stroke: "#000",
strokeWidth:1
});

var twoBall= s.circle(150, 150, 15);

twoBall.node.onmousemove = function(){
twoBall.animate({ transform:'translate(10,-30,5)'}, 50);
}
как при отведении мыши вернуть twoBall в изначальное положение, а при нажатии изменить цвет, посредством snap.svg

Comments

[Antomas]

думаю чтобы не было каши попытаться надо сначала остановить анимацию предыдущего?

[Артур Мудрик]

Как заголовок вопроса кореллирует с самим вопросом?

Answer 1

[Дмитрий Гавриленко]

Попробуйте так. Возможно не будет работать, т.к. не проверял. сделайте бекап.

var startState = {
 fill:"red",
 stroke: "#000",
 strokeWidth:1
 };

var s = Snap("#svg");
var ball = s.circle(150, 150, 15);
 ball.attr(startState);

var twoBall= s.circle(150, 150, 15);

 twoBall.node.onmouseover = function(){ 
 twoBall.animate({ transform:'translate(10,-30,5)'}, 50); 
 };
 twoBall.node.onmouseout = function(){ 
 twoBall.animate(startState, 50); 
 };
 twoBall.node.onclick = function(){ 
 twoBall.attr({ fill:"green"}); 
 }

Comments

[Antomas]

спасибо, 2 случай работает с изменением цвета, но в исходное положение не возвращается

[Antomas]

а нет, все в рабочем виде), хотя не то что ожидал но работает

Answer 2

[Михаил Горячкин]

А зачем вы используете событие onmousemove? Если вам нужно при наведении что-то делать с элементом, а при сведении возвращать его в прежнее состояние, то вам нужны события mouseover и mouseout.

Comments

[Antomas]

из-за своей глупости) согласен с Вами