javascript - jQuery 将 div 的不透明度更改为 0.2，更改文本，将不透明度更改回 1

Question

我有这个脚本可以工作，但不是我想要的。

我希望 div 通过 animate 的不透明度为 0.2 到几乎隐藏，然后文本发生变化，然后通过 animate 将不透明度恢复为 1。

问题是文本在不透明度恢复到 1 后立即发生变化。

我该如何修复它，当不透明度为 0.2 时，文本将准确更改，这样当不透明度动画回到 1 时，文本将已经更改。

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

jQuery animate()可以在完成动画后接收一个回调函数来运行。您可以使用以下语法:

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

更新

首先，我怀疑您在 setInterval 代码块中对 animate() 的两次调用可能会导致问题。

其次，与您的问题无关，每次间隔失效时更新 DOM 不是很有效，尤其是当您的 H2、P 和 BG 值在你的动画期间永远不会改变。我建议您在开始动画之前更早地更新您的 div。

鉴于您向我展示的网站，我认为这是您可以做到的方式:

// 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();
}

它适用于这种 HTML 结构:

<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>

我给 .testimonial div 这个初始样式:

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

您可以查看此 fiddle 的结果:https://jsfiddle.net/pmgnvr2a/3/