jQuery Change opacity of div to 0.2, Change text, Change opacity back to 1

Question

I have this script that works, but not as i want.

I want div to be opacity 0.2 through animate to almost hide, Then text changes, Then opacity back through animate to 1.

The problem is that text changes right after the opacity has took place back to 1.

How could i fix it the text will change exactly when the opacity is 0.2, That way way when opacity is animated back to 1, text will be already changed.

JS:

var index = 0;
var total = jQuery('.testimonial').size() - 1;

setInterval(function() {

  jQuery('.testimonial_div').animate({
      opacity: 0.2
  }, {
      duration: 1500
  });
  jQuery('.testimonial_div h2').text(array[index].H2);
  jQuery('.testimonial_div p').text(array[index].P);
  jQuery('.testimonial_div').css({

    'background-image': array[index].BG

  });
  jQuery('.testimonial_div').animate({
      opacity: 1
  }, {
     duration: 1500
  });
  if (index == total) {
     index = 0;
  } else {
      index++;
  }

}, 6000);

Answer 1

The jQuery animate() can receive a callback function to run after it has completed animation. You can use this syntax:

jQuery('.testimonial_div').animate(
    {
       <your animate props name-value pairs>
    },
    {  
       complete: function () {
            // Step to change text
            // Step to animate opacity to 1
       }
    })

UPDATE

Firstly, I'm suspecting your two calls to animate() within your setInterval code block could be causing the issue.

Secondly, and unrelated to your question, updating the DOM each time your interval lapses is not very efficient especially if your H2 , P and BG values never change during your animation. I would suggested updating your divs earlier before you start the animation.

Given the website you showed me, I think this is the way you could do it:

// Get a handle of our divs we want to animate.
var testimonials = jQuery('.testimonial');

var index = 0;
var total = testimonials.size(); // This is deprecated in jQuery 1.8

var array = [
    {H2:"Heading ONE", P:"Paragraph 1", BG:""},
    {H2:"Heading TWO", P:"Paragraph 2", BG:""},
    {H2:"Heading THREE", P:"Paragraph 3", BG:""}
];
// Update our div content
for(var i = 0; i < total; i++)
{
    testimonials.eq(i).find('.testimonial_div h2').text(array[i].H2);
    testimonials.eq(i).find('.testimonial_div p')
         .text(array[i].P)
         .css({'background-image': array[i].BG});
}

// Start the animation with the first div (index = 0)
runCircularAnimation();

function runCircularAnimation() {
    // Put current div in front and animate opacity.
    testimonials.eq(index)
        .css({ 'z-index': '1'})
        .animate(
            { 
                opacity: '1' 
            },
            {
                duration: 1500,
                complete: function () {
                    fadeElem($(this));
                }
    });
};

// Fade out the element.
// On completion of the animation, trigger the next cycle by calling animateNext()
function fadeElem(elem) {
    elem.animate(
        { 
            opacity: '0.2' 
        },
        { 
            duration: 1500, 
            complete: function () {
                $(this).css({ 'z-index': '0'}); 
                animateNext();
            }
        });
}

// This triggers the animation of the next div by first incrementing the index.
function animateNext() {    
     index++;
     if (index == total) index = 0;
     runCircularAnimation();
}

It works with this HTML structure:

<div class='testimonial'>
     <div class='testimonial_div'>
        <h2></h2>
        <p></p>
    </div>
</div>
<div class='testimonial'>
    <div class='testimonial_div'>
        <h2></h2>
        <p></p>
    </div>
</div>
<div class='testimonial'>
    <div class='testimonial_div'>
        <h2></h2>
        <p></p>
    </div>
</div>

And I give the .testimonial divs this initial styles:

.testimonial {
    opacity: 0;
    position: absolute;
    top: 0;
}

You can check out this fiddle for the result: https://jsfiddle.net/pmgnvr2a/3/