Seeker Searchbar Extra jQuery Header (with Easing) Snippet
By default jQuery's .
animate function has two built-in easing methods — linear and swing — which we use in the Seeker's default jQuery Header snippet below:
<script>
jQuery(function(){
$j("#searchBar").hide();
$j("#searchIcon").click(function(){
$j("#searchBar").animate({
opacity: 'toggle',
top: 'toggle'
}
);
});
});
</script>
However, in our new
Seeker Searchbar jQuery Header (with Easing) Snippet we've now introduced the framework for you to customise your own easing effect.
If you're not sure what an easing effect looks like, try out the searchbar above. And here is the jQuery code for this page:
<script>
jQuery(function(){
$j("#searchBar").hide();
$j("#searchIcon").click(function(){
$j("#searchBar").animate({
opacity: 'toggle',
top: 'toggle',
duration: 'slow',
easing: 'easeOutElastic'
})
.animate({
left: 30 }, {
duration: 'slow',
easing: 'easeOutElastic'
});
});
});
</script>
As you can see from the example above, there are 2 easing parameters to be configured for the Seeker:
duration — slow, medium or fast.
(You can also use miliseconds: 1000, 3000, 5000 etc.)
easing — easeOutElastic
(or any of the 30 methods listed below)
Easing Methods
easeInQuad
easeOutQuad
easeInOutQuad
easeInCubic
easeOutCubic
easeInOutCubic
easeInQuart
easeOutQuart
easeInOutQuart
easeInQuint
easeOutQuint
easeInOutQuint
easeInSine
easeOutSine
easeInOutSine
easeInExpo
easeOutExpo
easeInOutExpo
easeInCirc
easeOutCirc
easeInOutCirc
easeInElastic
easeOutElastic
easeInOutElastic
easeInBack
easeOutBack
easeInOutBack
easeInBounce
easeOutBounce
easeInOutBounce
Try out these methods live and
find out more about [jQuery Easing here
