不确定如何将元素设置为透明

Not sure how to start an element off as transparent

本文关键字：设置 透明 元素 不确定      更新时间：2023-09-26

因此，我试图在单击主标题时使无序列表淡出，但我不确定如何使无序列表以透明的方式开始。我不想把它淡出，因为这涉及到动画。我只是希望它在加载页面时是不可见的。

例如：

HTML

<h1 id="event">Click Me To Show List</h1>
<ul id="list">
    <li>Example 1</li>
    <li>Example 2</li>
</ul>

JQuery

$(document).ready(function(){
    // How would I make the <ul> start as transparent ???
    $('#event').click(function(){
        $('#list').fadeIn(3000);
    });
});

只需添加

#list {
  display: none;
}

到您的css。

演示

如果您希望它与jQuery一起使用，您可以在.ready-处理程序中添加以下内容：

$('#list').hide();

首先，您的语句中有一个错误。它是：

$('#list').fadeIn(3000);
// -------^ You forgot the .

使用opacity: 0;使其在CSS中透明。或者，如果你想使用jQuery，可以这样使用$.fadeTo()：

$(elem).fadeTo(0, 0);

代码段

$(function () {
  $("div").fadeTo(0, 0).removeClass("hidden");
});
.hidden {opacity: 0; visibility: hidden;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="hidden">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Temporibus error reiciendis, numquam id, praesentium illum. Enim molestias modi facilis pariatur eligendi doloribus qui assumenda voluptates, ut, nobis vel consequatur dolorem.</div>

如果你想要fadeIn()元素，你可以从.hide()开始，然后从fadeIn()开始，通过使用这样的.hidden类。无论如何，你都看不到内容的闪光！

代码段

$(function () {
  $("div").hide().removeClass("hidden").fadeIn(3000);
});
.hidden {display: none;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="hidden">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Temporibus error reiciendis, numquam id, praesentium illum. Enim molestias modi facilis pariatur eligendi doloribus qui assumenda voluptates, ut, nobis vel consequatur dolorem.</div>

HTML

<h1 id="event">Click Me To Show List</h1>
<ul id="list" style="display:none;">
    <li>Example 1</li>
    <li>Example 2</li>
</ul>

JQuery

$(document).ready(function(){
    // How would I make the <ul> start as transparent ???
    $('#event').click(function(){
        $('#list').show();
    });
});
相关文章：