CODEWITHSUNDEEP
jqueryqueuefadeinfadeouteffect
Rasmus Hjorth Lüdeking
Rasmus Hjorth Lüdeking

Reputation: 770

FadeOut, effect queue

I've run into a small problem regarding the effects queue in jquery. What im trying to achieve is having an element fade in as the same start point as animation - easy. Problem is when I want to have it fadeOut when animation is ending, seeing as manipulating queue doesnt seem to work.

https://jsfiddle.net/dpm3x4vw/
See how box fade in at duration 500 at same time as animation starts. I'm trying to achieve the reverse of this at the ending of the animation

function animateC(targetElement) {
var targ = targetElement.width();
$(targetElement).fadeIn({queue:false, duration: 500 }, 'linear');
$(targetElement).animate({ left: 0 - targ }, 10000, 'linear');
// I wanna fadeOut in same style as the fadeIn aswell! 
}

Upvotes: 1

Views: 607

Answers (1)

twernt
twernt

Reputation: 20591

You can achieve this effect by adding a parent and animating it too. This will make the blue bar start to fade out 500 milliseconds before the motion ends:

HTML:

<div>
  <div id="test">
    <p>test</p>
  </div>
</div>

JavaScript:

function animateC(targetElement) {
  var targ = targetElement.width();

  $(targetElement)
    .fadeIn({ queue: false, duration: 500 }, 'linear')
    .animate({ left: 500 - targ }, 10000, 'linear')
    .parent()
    .delay(9500)
    .fadeOut({ duration: 500 }, 'linear');
}

You can't actually set up parallel animation queues on a single element. Everything either executes immediately or in sequence, including delays. But there's no reason that you can't animate an element and its parent simultaneously.

Upvotes: 1

Related Questions