I've been playing with the easing on a menu so long that it is making me dizzy. I have a menu and when you click on it, it eases the associated content into view. I'm not sure what search terms to use to have the element just appear instead of ease. Instead of animating from -1000px to 0px, just go directly from one to another.
Here is the code I have been using from CODROPS
I'm trying to modify or replace it so the page doesn't ease into view it just blinks into existence.
if(idx > current){
$current.stop().animate({'top':'-1000px'},600,'linear',function(){
$(this).css({'top':'310px'});
});
$next.css({'top':'1000px'}).stop().animate({'top':'5px'},600,'linear');
}
/* UP THE LIST */ else if(idx < current){
$current.stop().animate({'top':'1000px'},600,'linear',function(){
$(this).css({'top':'1000px'});
});
$next.css({'top':'-1000px'}).stop().animate({'top':'5px'},600,'linear');
}
If you don't want animation, you can either just
hide()
andshow()
the new elements or just change theirheight()
orwidth()
directly (depending upon what previous state the elements were in).