2

我想为我的段落制作动画，点击按钮后内容将被替换。所以按钮#start_animation应该启动文本in动画，按钮#out_animation应该引起out动画。然后我点击#replaced_word替换段落内容的第三个按钮。

重要提示：我总是点击同一行：

  1. #start_animation

  2. #out_animation

  3. #replaced_word

所以这个词应该由一个动画（）进来，fadeIn然后由另一个动画（）出去，fadeOut然后被替换，然后我再次点击第一个按钮#start_animation，它一遍又一遍地重复。问题是它只在第一次工作。我的意思是直到我#start_animation第二次点击。我之前用代码写过这个问题，但它太长了，所以我以片段的形式做了。有任何想法吗？

$('#start_animation').click(function() {
  $('#sample_text').textillate('in');
  $('#paragraph').textillate('start');
  $('#paragraph').addClass('show');
});

/*-----------------------------------------------*/

$("#out_animation").click(function() {
  $('#sample_text').textillate('out');
  $('#paragraph').textillate('out');
  setTimeout(function() {
    $('#paragraph').removeClass('show');
  }, 1000);
});

var words = ["peter", "michael", "john", "derek", "chris"];

function replacing() {
  document.getElementById('paragraph').innerHTML = getRandomItem(words);
}

var btn2 = document.getElementById("replaced_word");

btn2.addEventListener("click", replacing);

function getRandomItem(array) {
  return array.splice(Math.floor(Math.random() * array.length), 1)[0];
}

/*-----------------------------------------------*/

$(function() {
  $('#paragraph').textillate({
    loop: false,
    autoStart: false,
    in: {
      effect: 'fadeIn',
      shuffle: false,
      delay: 80
    },
    out: {
      effect: 'fadeOut',
      shuffle: false,
      delay: 40,
      reverse: true
    }
  });
})
.show {
  opacity: 1!important;
}

#paragraph {
  opacity: 0;
}
<script src="https://code.jquery.com/jquery-3.1.1.js"></script>
<script src="https://cdn.rawgit.com/jschr/textillate/3ca7326c/jquery.textillate.js"></script>
<script src="https://cdn.rawgit.com/davatron5000/FitText.js/0b4183af/jquery.fittext.js"></script>
<script src="https://cdn.rawgit.com/davatron5000/Lettering.js/d06bb733/jquery.lettering.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">

<button id="start_animation">start animation</button>
<button id="out_animation">out animation</button>
<button id="replaced_word">replace word</button>
<p id="paragraph">TEST</p>

4

2 回答 2

1

问题是，每次替换段落中的文本时，您都需要“重置”插件。好吧，您还需要替换元素 DOM 本身，否则插件将什么也不做，因为它已经附加了一个 DOM 元素。

$('#start_animation').click(function() {
  $('#sample_text').textillate('in');
  $('#paragraph').textillate('start');
  $('#paragraph').addClass('show');
});

/*-----------------------------------------------*/

$("#out_animation").click(function() {
  $('#sample_text').textillate('out');
  $('#paragraph').textillate('out');
  setTimeout(function() {
    $('#paragraph').removeClass('show');
  }, 1000);
});

var words = ["peter", "michael", "john", "derek", "chris"];

function replacing() {
  $('#paragraph').replaceWith('<p id="paragraph">' + getRandomItem(words) + '</p>');
  init();
}

var btn2 = document.getElementById("replaced_word");

btn2.addEventListener("click", replacing);

function getRandomItem(array) {
  return array.splice(Math.floor(Math.random() * array.length), 1)[0];
}

function init() {
console.log('init');
  $('#paragraph').textillate({
    loop: false,
    autoStart: false,
    in: {
      effect: 'fadeIn',
      shuffle: false,
      delay: 80
    },
    out: {
      effect: 'fadeOut',
      shuffle: false,
      delay: 40,
      reverse: true
    }
  });
}

/*-----------------------------------------------*/

$(function() {
  init();
});
.show {
  opacity: 1!important;
}

#paragraph {
  opacity: 0;
}
<script src="https://code.jquery.com/jquery-3.1.1.js"></script>
<script src="https://cdn.rawgit.com/jschr/textillate/3ca7326c/jquery.textillate.js"></script>
<script src="https://cdn.rawgit.com/davatron5000/FitText.js/0b4183af/jquery.fittext.js"></script>
<script src="https://cdn.rawgit.com/davatron5000/Lettering.js/d06bb733/jquery.lettering.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">

<button id="start_animation">start animation</button>
<button id="out_animation">out animation</button>
<button id="replaced_word">replace word</button>
<p id="paragraph">TEST</p>

顺便说一句，为什么您需要手动完成所有这些人员？该插件似乎具有使用转换手动替换文本的功能。

于 2018-04-08T14:54:55.903 回答
1

发生的情况是，当您操作 DOM 以更改段落的文本时，textillate 事件不再绑定到它。

一个简单的解决方案是使用<p id="paragraph"><span id="paragraph_text">TEST</span></p>并且只执行 DOM 操作#paragraph_text

另外，我注意到它$('#sample_text')没有被使用并且可以被删除。

$('#start_animation').click(function() {
  $('#paragraph').textillate('start');
  $('#paragraph').addClass('show');
});

/*-----------------------------------------------*/

$("#out_animation").click(function() {
  $('#paragraph').textillate('out');
  setTimeout(function() {
    $('#paragraph').removeClass('show');
  }, 1000);
});

var words = ["peter", "michael", "john", "derek", "chris"];

function replacing() {
  document.getElementById('paragraph_text').innerHTML = getRandomItem(words);
}

var btn2 = document.getElementById("replaced_word");

btn2.addEventListener("click", replacing);

function getRandomItem(array) {
  return array.splice(Math.floor(Math.random() * array.length), 1)[0];
}

/*-----------------------------------------------*/

$(function() {
  $('#paragraph').textillate({
    loop: false,
    autoStart: false,
    in: {
      effect: 'fadeIn',
      shuffle: false,
      delay: 80
    },
    out: {
      effect: 'fadeOut',
      shuffle: false,
      delay: 40,
      reverse: true
    }
  });
})
.show {
  opacity: 1!important;
}

#paragraph {
  opacity: 0;
}
<script src="https://code.jquery.com/jquery-3.1.1.js"></script>
<script src="https://cdn.rawgit.com/jschr/textillate/3ca7326c/jquery.textillate.js"></script>
<script src="https://cdn.rawgit.com/davatron5000/FitText.js/0b4183af/jquery.fittext.js"></script>
<script src="https://cdn.rawgit.com/davatron5000/Lettering.js/d06bb733/jquery.lettering.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">

<button id="start_animation">start animation</button>
<button id="out_animation">out animation</button>
<button id="replaced_word">replace word</button>
<p id="paragraph"><span id="paragraph_text">TEST</span></p>

于 2018-04-08T15:23:53.093 回答