Animate opacity from 0 to 1 to 1 while moving on x axis

Question

I am facing a problem with jQuery, and I need your help!

I have an object there is moving from one point to another on the x-axis. What I really want to achieve, is a animation of this objects opacity, going from 0 to 1 and to 0 again, in the exact same time, it takes the object to travel from the staring point to the end point.

What I have been trying to do is:

$('.swipe').css({opacity: 0});
$('.swipe').animate({opacity: 1, left: '400'}, 1000);
$('.swipe').animate({opacity: 0, left: '800'}, 1000);

This is giving me an "start stop start" animation, and not this smooth animation that I want :)

example:

START >>>>>>>>>>>>>>>>>> MIDDLE >>>>>>>>>>>>>>>>>>> END
OPC:0 >>>>>>>>>>>>>>>>>> OPC: 1 >>>>>>>>>>>>>>>>>>> OPC:0

Thanks for your time :)

/Troels

Please post the code you have so far. – Huangism Sep 03 '14 at 19:56 — Huangism, Sep 03 '14 at 19:56

Huangism · Answer 1 · 2014-09-03T20:45:57.917

This happens because you are setting left to 400 always, if you set left to 800 for the second one than it will work

http://jsfiddle.net/oesw6onk/2/

$(document).ready(function () {
    $("button").click(function () {
        $("div").animate({
            left: '400',
            opacity: '1',
        }, function () {
            $("div").animate({
                left: '800',
                opacity: '0',
            })
        });
    });
});

I put the second animation in the complete function of the first as well.

OR

you can use the increment

http://jsfiddle.net/oesw6onk/3/

$(document).ready(function () {
    $("button").click(function () {
        $("div").animate({
            left: '+=400',
            opacity: '1',
        }, function () {
            $("div").animate({
                left: '+=400',
                opacity: '0',
            })
        });
    });
});

You might want to set the left to 0 again after the final animation for this version as you can see the box will keep 400 pixel to the right every time you click the button.

Example of the left reset http://jsfiddle.net/oesw6onk/4/

CSS option

http://jsfiddle.net/oesw6onk/6/

@-webkit-keyframes NAME-YOUR-ANIMATION {
    0% {
        opacity: 0;
        left: 0;
    }
    50% {
        opacity: 1;

    }
    100% {
        opacity: 0;
        left: 800px;
    }
}
@-moz-keyframes NAME-YOUR-ANIMATION {
    0% {
        opacity: 0;
        left: 0;
    }
    50% {
        opacity: 1;

    }
    100% {
        opacity: 0;
        left: 800px;
    }
}
@-o-keyframes NAME-YOUR-ANIMATION {
    0% {
        opacity: 0;
        left: 0;
    }
    50% {
        opacity: 1;

    }
    100% {
        opacity: 0;
        left: 800px;
    }
}
@keyframes NAME-YOUR-ANIMATION {
    0% {
        opacity: 0;
        left: 0;
    }
    50% {
        opacity: 1;

    }
    100% {
        opacity: 0;
        left: 800px;
    }
}
div {
    -webkit-animation: NAME-YOUR-ANIMATION 2s infinite;
    -moz-animation: NAME-YOUR-ANIMATION 2s infinite;
    -o-animation: NAME-YOUR-ANIMATION 2s infinite;
    animation: NAME-YOUR-ANIMATION 2s infinite;
}

Hi Huangism, thats right, but then i have an "start stop start" animation. I want a smooth animation from the starting point to the end point :) — thar, Sep 03 '14 at 20:23
Perhaps then it is best to do it with css http://stackoverflow.com/questions/8449933/animation-css3-display-opacity — Huangism, Sep 03 '14 at 20:35

score 0 · Answer 2 · answered Sep 03 '14 at 20:05

0

HTML

<button>Start Animation</button>
<div style="background:#98bf21;height:100px;width:100px;position:absolute; opacity:0;">
</div>

jQuery

$(document).ready(function(){
$("button").click(function(){
    onehalf();
    otherhalf();
  });
 function onehalf(){
 $("div").animate({
      left:'50%',
      opacity:'1',
    });
 }
function otherhalf(){
 $("div").animate({
      left:'100%',
      opacity:'0.1',
    });
 }
});

DEMO

If you want to hide the div at the slide end simple set opacity to 0 in function otherhalf()

answered Sep 03 '14 at 20:05

Syed Ali Taqi

4,898
3
34
44

Hi there :) Thanks, but this is not much different then this: $('.swipe').css({opacity: 0}); $('.swipe').animate({opacity: 1, left: '200'}).animate({opacity: 0}); – thar Sep 03 '14 at 20:12
Its similar but you can notice I'm increasing `left` from **50%** to **100%** causing it move all along x-axis. Exactly what to you want different from this? – Syed Ali Taqi Sep 03 '14 at 20:18

score 0 · Answer 3 · answered Sep 04 '14 at 06:41

0

Okay, I just found a solution myself :)

$('.swipe').css({opacity: 0});
$('.swipe').animate({opacity: 1}, {duration: 1000});
$('.swipe').animate({opacity: 0}, {duration: 1000});
$('.swipe').animate({left: 400}, {duration: 2000, queue: false});

answered Sep 04 '14 at 06:41

thar

1,094
2
13
25

Animate opacity from 0 to 1 to 1 while moving on x axis

3 Answers3