Question

我有这个脚本可行，但不是我想要的。

我希望div通过动画显示不透明度几乎隐藏，然后文本更改，然后通过动画将不透明度返回到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
       }
    })

<强>更新

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

其次，与您的问题无关，每当您的间隔时间过去时更新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;
}

您可以查看结果的小提琴：https://jsfiddle.net/pmgnvr2a/3/

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

1 个答案: