I have been playing around with the animation framework in jQuery and thought I would use it to tell a story about what happened on a bus one day.
It all happened like this:
It all happened like this:
…
- I got on the bus one day and sat next to a very big guy. I could not fit properly on my side of the seat and my leg was off the side, preventing people from comfortably walking past me.
- At the next stop, a guy who had a double-seat to himself got off;
- Then, a lady who was already sitting comfortably next to a thin guy moved to take over the whole double-seat (she clearly felt that sharing a seat with someone was beneath her :));
- I, however, did not mind at all and moved to sit next to the thin guy;
- Then, much to my amusement, a guy got on the bus and sat next to the lady, putting her in no better position than she started;
This amused me, so I thought I’d re-create the scene using jQuery (below).
Click the “Dave, Show Me What Happened” button (press F11 to go full screen):
The code which is the engine for my little melodrama is:
var undef = 'undefined'; // saves us from creating and throwing away a string every time.
if(typeof(busNamespace) === undef) {
var busNamespace = { };
}
if(typeof(constants) === undef) {
var constants = { };
}
$(function() {
var revealStoryButton = $("#reveal");
$("#story").hide();
revealStoryButton.text(constants.readMore);
revealStoryButton.click(function() {
var thisButton = $(this);
$("#story").slideToggle(400, function(){
if(thisButton.text() === constants.readMore) {
thisButton.text(constants.hideStory);
}
else{
thisButton.text(constants.readMore)
}
});
});
busNamespace.bus = $('#bus');
busNamespace.dave = $('<img id="dave" src="' + constants.urlOfPersonImage + '" />');
busNamespace.lady = $('<img id="lady" src="' + constants.urlOfPersonImage + '" />');
busNamespace.someGuyWhoGotOff = $('<img id="someGuyWhoGotOff" src="' + constants.urlOfPersonImage + '" />');
busNamespace.newGuyGetsOn = $('<img id="newGuyGetsOn" src="' + constants.urlOfPersonImage + '" />');
busNamespace.bus.prepend(busNamespace.someGuyWhoGotOff);
busNamespace.bus.prepend(busNamespace.dave);
busNamespace.bus.prepend(busNamespace.lady);
busNamespace.newGuyGetsOn.hide();
busNamespace.bus.append(busNamespace.newGuyGetsOn);
busNamespace.daveOriginalPosition = { left: busNamespace.dave.css('left'), top: busNamespace.dave.css('top') };
busNamespace.ladyOriginalPosition = { left: busNamespace.lady.css('left'), top: busNamespace.lady.css('top') };
busNamespace.someGuyWhoGotOffOriginalPosition = { left: busNamespace.someGuyWhoGotOff.css('left'), top: busNamespace.someGuyWhoGotOff.css('top') };
busNamespace.newGuyGetsOnOriginalPosition = { left: busNamespace.newGuyGetsOn.css('left'), top: busNamespace.newGuyGetsOn.css('top') };
$('#onWithTheShow').on('click', busNamespace.someGuyWhoGotOffGetsOff);
$('#reset').on('click', busNamespace.resetPlayers);
});
(function(ns) {
var bus;
var dave;
var lady;
var someGuyWhoGotOff;
var newGuyGetsOn;
var daveOriginalPosition;
var ladyOriginalPosition;
var someGuyWhoGotOffOriginalPosition;
var newGuyGetsOnOriginalPosition;
ns.someGuyWhoGotOffGetsOff = function() {
ns.someGuyWhoGotOff.animate({left: "+=120"}, 1000)
.animate({top: "-=125"}, 1000)
.animate({left: "-=120", opacity: 0}, 1000, ns.ladyAndDaveMove);
};
ns.ladyAndDaveMove = function() {
ns.dave.animate({left: "-=90"}, 1000)
.animate({top: "-=70"}, 1000);
ns.lady.animate({left: "-=150"}, 1000)
.animate({top: "+=150"}, 1000, ns.ladyAndDaveMoveAgain);
};
ns.ladyAndDaveMoveAgain = function() {
ns.dave.animate({top: "-=300"}, 1000)
.animate({left: "+=90"}, 1000);
ns.lady.animate({top: "+=98"}, 1000)
.animate({left: "-=140"}, 1000, ns.newGuyGetsOnAndSitsNextToLady);
};
ns.newGuyGetsOnAndSitsNextToLady = function() {
ns.newGuyGetsOn.fadeIn(1000);
ns.newGuyGetsOn.animate({left: "+=150"}, 1000)
.animate({top: "+=128"}, 1000)
.animate({left: "-=92"}, 1000);
};
ns.resetPlayers = function() {
ns.dave.fadeOut(600, function(){
ns.dave.hide();
ns.dave.css({ 'left' : ns.daveOriginalPosition.left, 'top': ns.daveOriginalPosition.top });
ns.dave.fadeIn(600);
});
ns.lady.fadeOut(600, function(){
ns.lady.hide();
ns.lady.css({ 'left' : ns.ladyOriginalPosition.left, 'top': ns.ladyOriginalPosition.top });
ns.lady.fadeIn(600);
});
ns.someGuyWhoGotOff.css({
'left' : ns.someGuyWhoGotOffOriginalPosition.left,
'top': ns.someGuyWhoGotOffOriginalPosition.top
}).animate({opacity: 1}, 2000);
ns.newGuyGetsOn.css({
'left' : ns.newGuyGetsOnOriginalPosition.left,
'top': ns.newGuyGetsOnOriginalPosition.top
}).hide(600);
};
})(busNamespace);
(function(ns) {
ns.hideStory = 'Click here to hide story';
ns.readMore = 'Click here to read more...';
ns.urlOfPersonImage = "https://davidrogers.id.au/wp_jsPosts/person.png";
})(constants);
Even when having fun, I try to follow best practices, such as the use of namespaces. First code for 2013!!!
0 Comments.