2013-04-08 5 views
0

Я хочу, чтобы изображение, которое я наводил, чтобы двигаться вверх и назад, когда я больше не вишу. Я смог выполнить этот эффект с помощью CSS3, но поскольку не все браузеры поддерживают его, я хотел бы заставить его работать с jQuery. Я создал скрипку для вас: http://jsfiddle.net/fSthA/2/jQuery animate bump up on hover effect

Вот мой JQuery код:

$('.full-circle').mouseOver(
    function(){ 
     $(this).stop().animate(
      {margin-top: '2'}, 500, 'swing' 
     );//end animate 
    },//end function 
    function(){ 
     $(this).stop().animate(
      {margin-top: '15'}, 500, 'swing' 
     );//end animate 
    }//end function 
);//end hover 
+1

, что ваш вопрос? – Brandon

ответ

1

Я не уверен, что ваш вопрос, но я изменил вашу скрипку, чтобы сделать это с помощью JQuery. Я просто должен был удалить переход СМЧ :hover стиль, добавить Jquery к скрипке, изменить ваш animate вызов использовать marginTop вместо margin-top:

$('.full-circle').hover(
    function(){ 
     $(this).stop().animate(
      {marginTop: '2'}, 500, 'linear' 
     );//end animate 
    },//end function 
    function(){ 
     $(this).stop().animate(
      {marginTop: '15'}, 500, 'linear' 
     );//end animate 
    }//end function 
);//end hover 

http://jsfiddle.net/fSthA/5/

+0

Изменен цвет до красного: http://jsfiddle.net/basarat/fSthA/8/, поэтому круг практически виден без косички: D – basarat