Jquery Transit Not working

Question

I've been playing around with the jquery plugin Jquery Transit : http://ricostacruz.com/jquery.transit/ but no matter what I do, the code doesn't behave like I expect it to (as a matter of fact, it doesn't behave at all)

 <!DOCTYPE html>
<html>
<head>
  <style>
  div {
background-color:yellow;
width:100px;
border:1px solid blue;
position:absolute;
left:50px;
}

</style>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js'></script>
<script scr='jquery.transit.js'></script>
</head>

<title>test</title>
</head><body>
 <button id="go"> Run</button>
<div id="block">Hello!</div>

    <script>
$(function() {
    $("#go").click(
function(){
 $("#block").transition({ x: '90px' }, 1500 );
});
});
</script>
</body>
</html>

The code doesn't work at all. I added the jquery animation code to compare it to, which works perfectly fine. Now I KNOW that jquery 1.8 broke jquery transit, but I'm using jquery 1.7 here so that shouldn't be an issue.

I'm at a loss here, anyone got any ideas?

EDIT:

I've followed everyone's instructions and created this: http://web.uvic.ca/~markkoni/ and although the examples seem to work jsfiddle it doesn't work in practice.

Marcin, you typed wrong scr="" http://i.imgur.com/wbuxm.png Use notepad++ or other IDE that color hilight, so you would see if theres a syntax problem — fedmich, Nov 22 '12 at 00:16

fedmich · Accepted Answer · 2012-11-22T00:01:27.970

2

Working demo (Tested on localhost too): http://jsfiddle.net/fedmich/S2ube/

the minified script seems to be not working. change your code from

http://ricostacruz.com/jquery.transit/jquery.transit.min.js

to

http://ricostacruz.com/jquery.transit/jquery.transit.js

also don't directly hotlink the javascript and put it on your own site, because when his site is down later, your web_app will also be down if you use his site's js.

and yes, put your code after pageload

$(function() {
    //your code here
});

edited Nov 22 '12 at 00:01

answered Nov 21 '12 at 23:28

fedmich

5,343
3
37
52

Sorry I deleted the comment, it's an issue with my network not loading https ressources. Sorry about that. – rayfranco Nov 21 '12 at 23:57
ah yes, his site is a bit down too before, hence I adviced not to hotlink from his site – fedmich Nov 21 '12 at 23:58
When I do it on the jsfiddle it works... but when I put to the test it does not for some reason. Here is what I did: http://web.uvic.ca/~markkoni/ – curious-cat Nov 22 '12 at 00:09
http://i.imgur.com/wbuxm.png Use notepad++ or other IDE that color hilight, so you would see if theres a syntax problem – fedmich Nov 22 '12 at 00:15
Oh, god, I must be dislexic. Thanks so much! – curious-cat Nov 22 '12 at 00:17
No problem, these things happens to all of us before at some time. Syntax Hilighting can help us with this kind of issues. Cheers! – fedmich Nov 22 '12 at 00:19

rayfranco · Answer 2 · 2012-11-22T00:15:57.203

Make sur your DOM is loaded before manipulating it by enclosing it in a jQuery ready handler :

$(function(){
    $('#go').click(function(){
        $("#block").transition({x: '90px'}, 1500);
    });
});

Also, prefer using css left property instead of x which does not exists.

div {    
    background-color: yellow;
    width: 100px;
    border: 1px solid blue;
    position: absolute;
    left: 50px;
}

Here is a working fiddle

Also make sure your script tag looks like this :

<script type="text/javascript">

Instead of

<script>

Notes :

I'm using jQuery 1.7.2 in my fiddle, it seems that transit is not compatible with transit.js yet.

score 1 · Answer 3 · answered Apr 06 '13 at 10:34

Transit does support backgroundColor and color properties. Check out the example : http://jsfiddle.net/PAnCh/

$(function() {
    $("#block").mouseenter(
    function(){
        $("#block").transition({ x: '+=90px', backgroundColor: '#cacaca', color: '#000' }, 1000 );
    });

    $("#block").mouseleave(
    function(){
         $("#block").transition({ x: '-=90px', backgroundColor: '#036', color: '#fff'  }, 500 );
    });
});

Jquery Transit Not working

3 Answers3