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

Have you included JQuery library? – Reger Feb 23 '14 at 14:28 — Reger, Feb 23 '14 at 14:28
provide your output in jsfiddle – Dinesh Kanivu Feb 23 '14 at 14:33 — Dinesh Kanivu, Feb 23 '14 at 14:33

score 1 · Answer 1 · answered Feb 23 '14 at 14:27

1

CSS is better in every way:

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

Just sayin' ;)

answered Feb 23 '14 at 14:27

Niet the Dark Absol

320,036
81
464
592

Chardard · Answer 2 · 2014-02-23T14:55:46.357

0

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>

edited Feb 23 '14 at 14:55

answered Feb 23 '14 at 14:39

Chardard

63
4

jquery should be before the transit js – Ashley Medway Feb 23 '14 at 14:52
Very true...... that's what you get for checking it in jsfiddle (where jQuery is added for you) before copying and pasting it across!!! – Chardard Feb 23 '14 at 14:58
jQuery is definitely added, its in use for other elements already. I've check that code, I see it works fine in the fiddle. The error is still returning in chromes console. 'Uncaught TypeError: Property '$' of object [object Object] is not a function (index):264 (anonymous function)' – frankstuner Feb 23 '14 at 14:59
Which line actually is it? if you click on the line number on the right in chromes console it should show you the line of code causing the issue..... do you have any other library's included? try replacing the $ sign with jQuery e.g. jQuery(".rotate").hover(function(){ – Chardard Feb 23 '14 at 15:29

score 0 · Accepted Answer · edited May 23 '17 at 12:20

0

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!

edited May 23 '17 at 12:20

Community

1
1

answered Feb 23 '14 at 15:33

frankstuner

4,380
2
16
15

jQuery transit on hover

3 Answers3