How can use the slideDown() function with easing?
Maybe extend it somehow?
I'm looking for something like this:
jQuery.fn.slideDown = function(speed, easing, callback) {
return ...
};
So i can use it slide this
$('.class').slideDown('400','easeInQuad');
or this
$('.class').slideDown('400','easeInQuad',function(){
//callback
});
Take a look at this page, which contains many easing functions: http://gsgd.co.uk/sandbox/jquery/easing/
Using that plugin you can do things like:
$(element).slideUp({
duration: 1000,
easing: method,
complete: callback});
You can use the animate method with jQueryUI and the easing effects like this:
$(".demo").animate({height: "hide"}, 1500, "easeInQuad", function(){});
Easing In and Out:
$("#SignIn").click(function () {
$(".divSlideTop").slideDown({
duration: 1000,
easing: "easeInQuad"
});
});
$("#close").click(function () {
$(".divSlideTop").slideUp({
duration: 1000,
easing: "easeOutQuad"
});
});
$('.class').slideDown(400,'easeInQuad');
Quotes not need for numeric.
Have a look at my pen Demo you simple to use $(element).slideUp({duration:1000});
Related
I've got this script that I have been working on and I need it to fade in and move up by it's height. If I remove the .animate() it fades in so i'm guessing theres something wrong there.
function showDesc (){
$(".container-box").hover(function(){
$(this).find(".contain-desc").fadeIn('slow').animate({
'bottom':'130px'
}, {duration: 'slow', queue: false;}
},function(){
$(this).find(".contain-desc").fadeOut();
});
}
I do have to use the old fashioned way of onmouseover="" in the html and below is my complete code so far, thanks.
http://jsfiddle.net/silverlight513/KuJkY/
The error is here:
{duration: 'slow', queue: false;}
You have terminated the statement with a semi-colon(;)
Change it to:
{duration: 'slow', queue: false}
EDIT:
There were a couple more errors in your code. I have updated the function:
function showDesc (){
$(".container-box").hover(function(){
$(this).find(".contain-desc").fadeIn('slow').animate({
'bottom':'130px'
}, {duration: 'slow', queue: false});//This was not closed
},function(){
$(this).find(".contain-desc").fadeOut();
});
}
http://jsfiddle.net/Hx65Q/3/ I want the slider not come from left side, but it must open itself from top. How to do this?
$("button" ).click(function() {
$('.login').toggle('slide', { duration: 1000, easing: 'easeOutBounce',
});
});
It is possible and quite easy to achieve, using direction: 'up'.
$("button").click(function () {
$('.login').toggle('slide', {
duration: 1000,
easing: 'easeOutBounce',
direction: 'up'
});
});
JsFiddle demo
Try this simple code.
$("button" ).click(function() {
$('.login').slideToggle( {
duration: 1000,
easing: 'easeOutBounce',
});
});
Demo
I am trying to animate a number so that it rolls into the number when the page loads. I am using another library to display a dial (http://anthonyterrien.com/knob/). The issue I am having is that the number seems to be different every time I run it. It should be a consistent number ending on 19420. However sometimes it is lower and there doesn't seem to be any particular pattern.
My JS code looks like this:
$(function() {
$('#dial').knob({
min: '0',
max: '25000',
readOnly: true
});
$({
value: 0
}).animate({
value: 19420
}, {
duration: 950,
easing: 'swing',
step: function() {
$('#dial').val(Math.round(this.value)).trigger('change');
}
});
});
The fiddle can be found here: http://jsfiddle.net/ND5Sf/
What have I done wrong or is there anything I've missed out? If not, are these 2 libraries not compatible?
The issue is because you are using step function instead of progress.
Step:
A function to be called for each animated property of each animated
element. This function provides an opportunity to modify the Tween
object to change the value of the property before it is set.
Progress:
A function to be called after each step of the animation, only once
per animated element regardless of the number of animated properties.
(version added: 1.8)
Code:
$(function () {
$('#dial').knob({
min: '0',
max: '25000',
readOnly: true
});
$({
value: 0
}).animate({
value: 19420
}, {
duration: 950,
easing: 'swing',
progress: function () {
$('#dial').val(Math.round(this.value)).trigger('change');
}
});
});
Docs: http://api.jquery.com/animate/
Demo: http://jsfiddle.net/IrvinDominin/JW2gP/
Why doesn't it fire the alert?
var $anchor = $(this);
$('.hide').val($(this).attr('href'));
$('html, body').animate({
scrollLeft: $($anchor.attr('href')).offset().left
}, {
queue: false,
duration: 1000,
easing: 'easeInOutCirc'
}, function () {
alert('test');
});
There are multiple different syntax options you can use with .animate(). When you pass a properties object and an options object (like you are doing), the completion function goes in the options object not as the third parameter like this:
var $anchor = $(this);
$('.hide').val($(this).attr('href'));
$('html, body').animate({
scrollLeft: $($anchor.attr('href')).offset().left
}, {
queue: false,
duration: 1000,
easing: 'easeInOutCirc',
complete: function () {
alert('test');
}
}
);
This is described in full in the jQuery .animate() doc.
.animate( properties, options )
properties - A map of CSS properties that the animation will move toward.
options - A map of additional options to pass to the method. Supported keys:
duration: A string or number determining how long the animation will run.
easing: A string indicating which easing function to use for the transition.
complete: A function to call once the animation is complete.
step: A function to be called after each step of the animation.
queue: A Boolean indicating whether to place the animation in the effects queue. If false, the animation will begin immediately. As of jQuery 1.7, the queue option can also accept a string, in which case the animation is added to the queue represented by that string.
specialEasing: A map of one or more of the CSS properties defined by the properties argument and their corresponding easing functions (added 1.4).
try to specify the third parameter as "complete" like so:
var $anchor = $(this);
$('.hide').val($(this).attr('href'));
$('html, body').animate({
scrollLeft: $($anchor.attr('href')).offset().left
}, {
queue: false,
duration: 1000,
easing: 'easeInOutCirc'
}, complete: function () {
alert('test');
});
Everything works just fine, but when I remove
{queue:false, duration: 800, easing: 'easeInOutQuart'}
from
$(".chapters_list").slideDown(
with a 500, it stops working. So if I don't want easing in my script, it will work fine, when I insert easing into the top function, like is shown below, it stops working. Why wont it allow me to have easing?
$('.article_book_title').click(function () {
if ($(".chapters_list").is(":hidden")) {
$(".chapters_list").slideDown({queue:false, duration: 800, easing: 'easeInOutQuart'}, function () {
doSlide($('UL.chapters_list li:first'))
});
} else {
$(".chapters_list").slideUp({queue:false, duration: 800, easing: 'easeInOutQuart'});
}
});
function doSlide(current) {
$(current).animate({
backgroundColor:'#d6f4aa', color:'#eee'
},40, function() {
$(this).animate({backgroundColor:'#252525', color:'#fff'}, 500)
doSlide($(current).next('li'));
});
}
The shortcut methods like slideUp dont take an object config as an argument.. they take the duration and the call back. If you want more advance options you have to use the animate method.
slideUp API