Question

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

EX：

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);
    });

});

Answer 1

添加

.ready

到你的CSS。

<强> Demo

如果你想要它与jQuery一起使用，你可以在$('#list').hide(); - 处理程序中添加以下内容：

var temperature = ((parseFloat(item.main.temp) - 273.15) * 1.80).toFixed(0);
temp.push([moment(item.dt, 'X').valueOf(), parseFloat(temperature)]);

Answer 2

首先，您的陈述中有错误。它是：

$('#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>

#list {
  display: none;
}

Answer 3

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();
    });

});

不确定如何以透明的方式启动元素

3 个答案: