召回我的 textille 动画的问题
Issue with recalling my textille animation
我想为我的段落做一个动画,点击按钮后内容会被替换。所以按钮 #start_animation
应该启动 textillate in
动画,按钮 #out_animation
应该导致 out
动画。然后我点击第三个按钮 #replaced_word
来替换我的段落内容。
重要:我总是点击同一行:
#start_animation
#out_animation
#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>
问题是,每次替换段落中的文本时,您都需要 "reset" 插件。那么,您还需要替换元素 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>
顺便说一句,为什么你需要手动完成所有这些工作人员?该插件似乎具有手动替换文本的功能 with transition.
发生的事情是,当您操纵 DOM 更改段落的文本时,textillate 事件不再绑定到它。
一个简单的解决方案是使用 <p id="paragraph"><span id="paragraph_text">TEST</span></p>
并且仅对 #paragraph_text
执行 DOM 操作
另外,我注意到 $('#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>
我想为我的段落做一个动画,点击按钮后内容会被替换。所以按钮 #start_animation
应该启动 textillate in
动画,按钮 #out_animation
应该导致 out
动画。然后我点击第三个按钮 #replaced_word
来替换我的段落内容。
重要:我总是点击同一行:
#start_animation
#out_animation
#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>
问题是,每次替换段落中的文本时,您都需要 "reset" 插件。那么,您还需要替换元素 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>
顺便说一句,为什么你需要手动完成所有这些工作人员?该插件似乎具有手动替换文本的功能 with transition.
发生的事情是,当您操纵 DOM 更改段落的文本时,textillate 事件不再绑定到它。
一个简单的解决方案是使用 <p id="paragraph"><span id="paragraph_text">TEST</span></p>
并且仅对 #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>