I've been playing around with the jquery plugin Jquery Transit : .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='.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 pare 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: / and although the examples seem to work jsfiddle it doesn't work in practice.
I've been playing around with the jquery plugin Jquery Transit : http://ricostacruz./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./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 pare 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.
Share Improve this question edited Feb 16, 2015 at 5:20 Jeff 12.4k10 gold badges53 silver badges89 bronze badges asked Nov 21, 2012 at 23:21 curious-catcurious-cat 4211 gold badge7 silver badges17 bronze badges 3- 1 close your click event dispatcher with $(function{ code }); – zb' Commented Nov 21, 2012 at 23:24
- I've edited my answer, your script tag is not correct. – rayfranco Commented Nov 22, 2012 at 0:16
- Marcin, you typed wrong scr="" i.imgur./wbuxm.png Use notepad++ or other IDE that color hilight, so you would see if theres a syntax problem – fedmich Commented Nov 22, 2012 at 0:16
3 Answers
Reset to default 2Working demo (Tested on localhost too): http://jsfiddle/fedmich/S2ube/
the minified script seems to be not working. change your code from
http://ricostacruz./jquery.transit/jquery.transit.min.js
to
http://ricostacruz./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
});
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 patible with transit.js yet.
Transit does support backgroundColor and color properties. Check out the example : http://jsfiddle/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 );
});
});