CODEWITHSUNDEEP
javascriptjquery
ctarimli
ctarimli

Reputation: 322

"fadeTo" function ignores the time

I have a div and I animate it's position with two divs(which are named as open and close).

I want "open" div to be fade out and invisible when opening animation completes. And become visible with fading in when closing animation completes.

But there is problem with the fading in. Time parameter is ignored and it appears when click action happens.

Here are my codes and a fiddle to see clearly what is going on with the codes;

$('.open').on('click', function(){
    $('.menu').animate({"marginLeft":"-30px"},1000);
    $('.open').fadeTo(1000, 0);
    setTimeout(function () {
        $('.open').css({"display":"none"})}, 1000);
    });
$('.close').on('click', function(){
    $('.menu').animate({"marginLeft":"82%"},1000);
    $('.open').fadeTo(1000, 100);
    });

the fiddle is http://jsfiddle.net/ctarimli/B9h2w/

as I know; the first paremeter is for time and the second one is the opacity in "fadeTo". Tell me If I am wrong or what is the solution for this?

Upvotes: 1

Views: 35

Answers (1)

j08691
j08691

Reputation: 207901

Opacity runs from 0 to 1, not 0 to 100. Use:

$('.close').on('click', function () {
    $('.menu').animate({
        "marginLeft": "82%"
    }, 1000);
    $('.open').fadeTo(1000, 1);
});

jsFiddle example

From the docs on .fadeTo():

opacity Type: Number A number between 0 and 1 denoting the target opacity.

Upvotes: 4

Related Questions