jQuery transit on hover

Question

fairly new at jQuery having trouble working out how to get jQuery transit working on hover.

$(".rotate").hover(function(){
    $(this).transition({
      perspective: '100px',
      rotateY: '180deg'
    });
});

This returns "Uncaught TypeError: Property '$' of object [object Object] is not a function", I've been messing with this for a while but seem to be going in circles.

If anyone can point me in the right direction I'd greatly appreciate it.

Thanks Frank

Answer 1

I got it working, it ended up being the wordpress version of jquery

see here jQuery Uncaught TypeError: Property '$' of object [object Window] is not a function

thanks for your help!

Answer 2

CSS is better in every way:

.rotate {
    transition: transform 0.4s ease;
    perspective: 100px;
}
.rotate:hover {
    transform: rotateY(180deg);
}

Just sayin' ;)

Answer 3

Your code seems to work fine, i just put it into a fiddle quickly..... Have you definitely included both jQuery and the transit.js library?

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript" src="http://ricostacruz.com/jquery.transit/jquery.transit.min.js"></script>
<style type="text/css">
  .rotate{ width:50px; height:50px; background-color:lightgrey; border:1px solid #000;  }
</style>
<div class='rotate'></div>    
<script type="text/javascript">
  $(".rotate").hover(function(){
    $(this).transition({
      perspective: '100px',
      rotateY: '180deg'
    });
  });
</script>