Hi, my name is Al

jQuery Slide in without Interface

Okay, my first jQuery example was very noob, and anyone that might know what they were doing(or paid more attention than I did) might have noticed there was an infinite amount of JS errors on the slide. I have no idea why. I was working on a submenu sliding in from the left. I tried to use interface again but got the infinite error problem again.

Having a look around I was playing around with the animate effect. From what I gather you can just move things wherever, and animate will make it look slidey. So all I had to do was have it off screen via a margin and animate to add a margin left, then it slides out with no problems. Here's what I mean:

$('#akuma').click(function() {
$('#akuma').removeClass("ready");
$('#akuma').addClass("active");

$('#hadouken').animate({ marginLeft: 300, opacity: 'show'}, "slow", function(){

$('#akuma').removeClass("active");
$('#akuma').addClass("ready"); $('#hadouken').hide();
$('#hadouken').animate({ marginLeft: 0});

});
return false;
});
})

Its that easy. On clicking, the first animate it starts to pull the hadouken id back to position 0. It then hides, so we dont see it sliding back. Because it’s a split second it just looks like its disappearing. When it’s back, it ‘fires’ again 300 pixels. And it slides out using the animate function. There is a callback function to reset Akuma properly, thanks to Ben Kroll.

Like before, I have put this all into a video game based example.