1

jQuery event triggers once written in developer console, why? How I could make it trigger every time while page not refreshed?

For example open webpage: http://www.express.co.uk/news

and type in developer console this piece of code:

$ = window.jQuery;
var logo = $('#expressLogo img');
logo.css({"-webkit-transition":"-webkit-transform .8s ease-in-out","transition":"transform .8s ease-in-out;"})
logo.hover(function(e) { 
    logo.css({"-webkit-transform":"rotate(360deg)","transform":"rotate(360deg);"})
});

As you see event triggers once on logo hover and then not repeat's on hover again. I tryied to write on.("mouseenter mouseleave") event and some other's same result as expected.

Kris
  • 38
  • 5

2 Answers2

1

As I see your problem you don't need jQuery. You can do it with pure css also. Please check.

.logo{
  -webkit-transition:-webkit-transform .8s ease-in-out;
  transition:transform .8s ease-in-out;
  }
  .logo:hover{
  -webkit-transform:rotate(360deg);
  transform:rotate(360deg);
  }
<img class="logo" src="http://www.dummymag.com/media/img/dummy-logo.png" />

I hope this will help you, Let me know if it not works.

Alex Mac
  • 2,970
  • 1
  • 22
  • 39
  • Yes I know how to do that in css. Just I need to know why event triggers in developer console just once. If I will paste in javascript file it will be okay, but in console work's once, why? – Kris Jul 12 '17 at 09:03
1

It works whenever you hover the element. but it doesn't have mouseout or mouseleave event so it returns to 0degree or transform 360deg more from current degree. so it looks working once.
You need to give a dynamic degree such as currentDegree + 360 or set mouseout event which sets the transform 0deg.

Chase Choi
  • 882
  • 11
  • 25