好吧,让我试着解释一下我的 gol: 我做了一个小元素(来自 ferecodecamp.com 的 Random Quote Machine),它非常实用。但我想让它像带过渡的幻灯片放映 (Power Point)。
看看我现在有什么Random Quote Machine project
- 页面应加载从零不透明度过渡到总不透明度的报价。 2 .当我点击按钮生成时,它应该再次更改报价,它应该是从 0 不透明度到 1 的报价。
CSS 可能是这样的:
span, i, footer{
opacity: 0;
}
.transitions {
transition-duration: 1s;
opacity: 1;
}
span, i, footer 在不透明度上从 0 变为 1,过渡持续时间为 1 秒。
我尝试了一些 jQuery,但没有按照我想要的方式顺利进行
<script type="text/javascript">
//for page load
$(".quote").load(function(){
$(".quote").addClass("transitions");
});
//for new quote generated
$(".button").click(function() {
$(".quote").fadeOut("slow", function() {
$(this).addClass("quote");
});
$(".quote").fadeIn("slow", function() {
$(this).addClass("quote");
});
});
</script>
拳头部分根本不起作用。 .load 事件从未起作用,而 .ready 仅适用于 .click 事件。
第二部分,部分有效,但先消失后消失。我想要消失(0 不透明度)到完全消失......
我已经尝试了漫长的两天,但没有任何进展。我会很高兴阅读一些建议。 提前致谢!
最佳答案
我会这样做:
// equivalent to $(document).ready(function()
$(function() {
// define an array of elements to fade
var elements = [$('#quote'), $('#author')];
fade(); // call a custom function defined below which will execute on page load
// on .button click, call the same function
$('.button').click(fade);
function fade() {
// for each element in elements (defined above), execute jQuery's hide() method and then fadeIn()
$.each(elements, function(index, element) {
element.hide().fadeIn();
});
}
});
如果您将其粘贴到您的 project 内的控制台中,效果很好。
关于javascript - jQuery 将 : on load and after for each click, 转换为 addClass,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41787193/