CODEWITHSUNDEEP
javascriptjqueryjquery-animatetransitionjquery-transit
curious-cat
curious-cat

Reputation: 421

Jquery Transit Not working

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.

Upvotes: 3

Views: 4900

Answers (3)

Plasebo
Plasebo

Reputation: 338

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 );
    });
});

Upvotes: 1

rayfranco
rayfranco

Reputation: 3690

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.

Upvotes: 1

fedmich
fedmich

Reputation: 5381

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
});

Upvotes: 2

Related Questions