We Keep Coding

Animation style ease, ease-out etc. is not working in my javascript code

I have a function that animates the addition of margin to a div-box, but for some reason easeOut animation style is not working for me. Linear animation style works fine tho.
Here is the function:
$("#bokse1").click(function() {
$("#nav").animate({
marginLeft: ["+=100px", "linear"],
}, 400, function() {});
});
Here is a fiddle: http://jsfiddle.net/hto5qLmb/1/
I wanted to make it like this:
marginLeft: ["+=100px", "easeOut"],
but it is not working.

It seems like jQuery really does not want to play nice with easing out with that type of animation selector, if you still want to have the ease out effect, use:
$("#bokse1").click(function() {
$("#nav").animate({ "margin-left": "+=50px" }, "easeOut" );
});
Additionally, have a look at your developer tools, and you can see the myriad of erros that fire when you attempt to use the easing in the way you did initially. Strange indeed

Running and resetting an animation each time a seperate animation reaches a position?

(This seems like it should be rather basic but I'm not sure how to handle it this.)
In a nutshell, whenever img (one of the FB logos) is -20 or farther, I would like the "dust" animation to occur, to create the effect that whenever the logo hits the footer a cloud of dust is kicked up.
I can easily get the animation to occur once, but need help getting it to occur multiple times. (Would collision detection be recommended for this? I assume I'd also need to reset the position and opacity, also. Would this fit in somehow?)
Here's a gif of the basic idea: http://i.imgur.com/vu8eTlp.gif
Here's a fiddle of what currently happens: http://jsfiddle.net/x6dferhh/4/
step: function(img, tween) {
if (img > -20 ) {
$("#"+ link.data("dust")).attr('src', 'http://i.imgur.com/oTZ9G9Z.png');
$("#"+ link.data("dust")).animate({
top: '-150',
opacity: '0'
}, 500);
}
}

It looks like all I had to do was reset the CSS to essentially get what I wanted.
if (now > -5) {
$("#"+ link.data("dust")).css('top', '0');
$("#"+ link.data("dust")).css('opacity', '1');
$("#"+ link.data("dust")).animate({
top: '-50px',
opacity: '0',
}, randomTime/5);
}

What you want to do is add a callback that executes when the "dust" animation completes.
function settleDust () {
// reset the animation for next time
}
$("#"+ link.data("dust")).animate({
top: '-150',
opacity: '0'
}, 500, settleDust);
See the jQuery.animate docs:
http://api.jquery.com/animate/#basic-usage

jQuery animate - opacity slower than height

Wondering if it's possible to make a jQuery animate property slower than another - here's what I have right now:
$(".thebox").animate({
height: "toggle",
opacity: "toggle"
},250);
When .thebox fades in and slides down simultaneously, I'd like to make opacity part of the animation slower, while making the height part faster.
The whole thing has to work with a button that on click causes the animation. It must be a toggle switch.
Thanks to anyone able to answer this!

Stack the animations on top of each other, and disable the default animation queueing.
$(".thebox")
.animate({height: "toggle"}, {duration: 250, queue:false})
.animate({opacity: "toggle"}, {duration: 500, queue:false}); // Runs twice as slow.
EDIT:
Since the events are triggered twice using toggle, we need a different approach, to detect wheter to hide or show the box. One simple solution would be a helper-class as such:
var theBox = $('.thebox');
if (theBox.hasClass('active')) {
// It is active, then fade it out
thebox
.removeClass('active')
.animate({height: 0}, {duration: 250, queue:false})
.animate({opacity: 0}, {duration: 500, queue:false});
} else {
// It is not active, show it
thebox
.addClass('active')
.animate({height: 'auto'}, {duration: 250, queue:false})
.animate({opacity: 1}, {duration: 500, queue:false});
}
Worth pointing out: The animations can be done using slideUp, slideDown, fadeIn and fadeOut instead of animate(). Also note the above assumes that there is only one element with the class theBox.

jQuery Possible to use the .fadeTo() more than once?

I am trying to write a script so that every time a specific button is pressed, I want to send out a warning message in a div tag. I decided to use the fadeTo because my div tag is inside a table and I dont want it to collapse. However, it seems like after the first press, any subsequent press will not work anymore. Does anyone know a workaround for this?
Here's my warning code:
$("#warning").html("The value is too low!").css('color','red').fadeTo(10000,0);

At the end of the fadeTo, the element's opacity is 0. To re-start, reset the opacity back to 100, since otherwise it's trying to animate from 0 to 0, which is...subtle to say the least. :-)
E.g.:
$("#warning")
.html("The value is too low!")
.stop() // <=== New bit: Stop the animation if it's running
.css({
'opacity': 1, // <=== New bit: Reset the opacity
'color': 'red'
})
.fadeTo(10000,0);
Live example | source (uses one second rather than ten)

You will have to show the div again:
$("#warning").show().html("The value is too low!").css('color','red').fadeTo(10000,0);

Another way is to use opacity animation instead:
$("#warning").html("The value is too low!").css({
color : 'red',
opacity : 1
}).stop().animate({
opacity : 0
}, 1000);
DEMO: http://jsfiddle.net/SDWmn/1/

jQuery css Visibility with animation

I have few div's placed underneath each other and I'm using css visibility to fade them in and out. The reason why I use visibility is so that the div's don't move place.
For fade In I'm using:
$('.drop1').css({opacity: 0.0, visibility: "visible"}).animate({opacity: 1.0});
and for fade Out I'm using:
$('.drop1').css({opacity: 0.0, visibility: "hidden"}).animate({opacity: 1.0})}, 200);
The FadeIn works, but the fadeOut doesn't work.
Now, you may think that the problem is the last ',200' but I will need to use that as a delay since the fadeout/visibility:hidden is on mouseleave event after 200ms.
So my question is: How can I do the visibility hidden with animation to act as a fadeOut.
Thanks alot

$('.drop1').css({opacity: 1.0, visibility: "visible"}).animate({opacity: 0}, 200);

why make it so hard, instead of animating the css, you could use the default fade functionality
$('.drop1').fadeIn(200);
$('.drop1').fadeOut(200);
edit
if you however want to fade it out without losing the height .
you can use fadeTo(duration, opacity, [callback]);
$('.drop1').fadeTo(200, 0);
check this example:
http://jsfiddle.net/ufLwy/1/

I was having similar issues, and here's what I ended up doing.
$.fadeToHidden = function ( selector, duration, complete ) {
$.when(
$( selector ).fadeTo( duration, 0 )
).done( function(){
$( selector ).css('visibility', 'hidden')
complete();
});
}
The reason I did this is that
fadeIn() / fadeOut() uses 'display' which F's up an element's height
fadeTo doesn't affect visibility, so while the element is visually hidden with opacity:0, users are still able to interact (i.e. click) the invisible element.
animate() is asynchronous so chaining CSS at the end doesn't guarantee that it will run when the animation is complete. Only by using the Deferred object that animations return ($.when() / $.done()) will you be guaranteed that the CSS is applied after all animations are complete.
EDIT
Alternatively, you could apply to visibility:hidden to each individual element once their respective animation is complete. This may be slightly quicker for selecting larger groups of elements, since you're only querying the DOM for the group of elements once.
$.fadeToHidden = function ( selector, duration, complete ) {
$.when(
$( selector ).fadeTo( duration, 0 , function(){
$(this).css('visibility', 'hidden');
} )
).done( complete );
}

I had a similar problem and I solved it this way:
To fade in :
$("#id").css({visibility:"visible", opacity: 0.0}).animate({opacity: 1.0},200);
To fade out:
$("#id").animate({opacity: 0.0}, 200, function(){
$("#"+txtid).css("visibility","hidden");
});
As you can see, I hide the div "#id" once the animation has ended.
I hope it's not too late

I know this is an old post but I came across a similar situation and this is what I ended up doing
$(".drop1").css("visibility", "visible").show().fadeOut(5000);

.drop1{ opacity: 0.0; }
$('.drop1').fadeTo( "slow" , 1.0);