我对此感到有点难过。我刚刚开始使用javascript，我在使用它时遇到了一些麻烦。基本上我在段落中有链接，当使用javascript点击时会扩展。但是，我想为此扩展添加效果，例如淡入淡出或滚动。以前，我只对div类添加了效果，但这不是div。无论如何这里是我的代码谢谢！
使用Javascript：
function reveal(a){
var e=document.getElementById(a);
if(!e) return true;
if(e.style.display=="none"){
e.style.display="inline"
} else {
e.style.display="none"
}
return true;
}
HTML：
<title>Project Star in a Jar</title>
<link rel="stylesheet" type="text/css" href="/../default.css"/>
<script type="text/javascript" src="/jscript/function.js"></script>
</head>
<link rel="shortcut icon" href= "/../images/favicon.png"/>
<link rel="icon" href="/../images/favicon.png" type="image/x-icon">
<body>
<div class="wrapOverall">
<div class="header">
<div class="logo">
<img src="/../images/starJar.png" href="index.php" style="width:100px;height:100px">
<div class="moto">
<h1> Project Star in a Jar</h1>
</div>
</div>
<div class="nav_main">
<ul>
<li><a href="/../index.php">Home</a></li>
<li><a href="#">Tutorial</a></li>
<li><a href="/../videos.php">Videos</a></li>
<li><a href="/../resources.php">Other Resources</a></li>
</ul>
</div>
</div>
<div class="sideContent">
<div class="sideTitle">
<h3>Table of Contents</h3>
</div>
<div class="sideLinks">
<ul>
<li><a href="intro.php" class="selected">i. Introduction</a></li>
<li><a href="section_one.php">1. What is Fusion?</a></li>
<li><a href="section_two.php">2. Hazards and Safety</a></li>
<li><a href="section_three.php">3. Vacuum Chamber</a></li>
<li><a href="section_four.php">4. Inner Grid</a></li>
<li><a href="section_five.php">5. Outer Grid</a></li>
<li><a href="section_six.php">6. Vacuum System</a></li>
<li><a href="section_seven.php">7. Electrical System</a></li>
<li><a href="section_eight.php">8. Achieving Fusion </a></li>
<li><a href="section_nine.php">9. Putting it all Together</a></li>
<li><a href="section_ten.php">10. Great, Now What?</a></li>
</ul>
</div>
</div>
<div class="Content">
<div class="contentTitle">
<h1>Star in a Jar - A How-To Guide</h1>
<h2>Introduction</h3>
</div>
<div class="contentText">
<!--Paragraph One-->
<p>
Why would anyone want to build a <q>star in a jar</q>? Is it because they want to feel like a mad scientist? Because they want to impress their friends or peers? Although these are all possible reasons, the main reason why people have been building and researching these incredible devices is because quite frankly, we are running out of energy solutions. If we don't have a working solution in the next 20-50 years, we either won't have energy or the little energy we produce will be outrageously expensive. The energy that we consume is almost directly matched with the human exponential growth model and we simply cannot be sustained with conventional energy production methods. The more people that are aware or interested in this technology, the faster we will be able to develop fusion based energy solutions.
</p>
<!--Paragraph Two-->
<p>
Since this is an advanced topic and this writing will use highly technical lexis, I will write in such a way as to target multiple audiences. I understand that some of you reading this are doing so because you are planning on building or already built a fusion device and are looking for more useful information to further develop and experiment with your device. On the other hand, some of you may be reading this from a purely academic standpoint and have nor the intention or means to build such a device. That is perfectly fine! If the former, and you are familiar with the terms and already have an understanding of the concepts in this text, then you can read it without expanding the text for a better tailored experience. However, if the latter, and you are unfamiliar with the terms of this field, I have developed the writing on the site to be dynamic and interactive. Every word or phrase you see that is in orange, can be expanded into an explanation when clicked. Try it out with the following phrase!
<a href="#" onclick="reveal('para1'); return false">What is Tritium?</a>.
<a id="para1" style="display:none">
(Tritium is a radioactive isotope of hydrogen with one proton and two neutrons)
</a>
I implemented this feature because I realize that this writing will be read by many different audiences with their own unique purposes for reading. As the writer, I strive to make this writing dynamic to fit their needs independently without compromising convince or enjoyment. Although the main purpose of this tutorial is to give a detailed analysis of the device and its workings in a tutorial based format, it is also to educate and address the needs and wants of the reader and hopefully, in the process raise awareness to a phenomenal technology that will change the world.
</p>
<!--Content Image-->
<div class="contentImage">
<img src="/../images/intro1.jpg" style="width:300px;height:300px">
</div>
<!--Paragraph Three-->
<p>
This tutorial is not going over any new exotic technology. The particular machine described uses very basic principles of classical physics and has been around since the mid 60's. Depending on the materials you have on hand, your results will vary. I can guarantee at the bare minimum, you will have a working demo fusor if you follow this tutorial. A demo fusor essentially does everything a normal fusor does, with the exception that no fusion of atoms is occurring. It is called demo because it is typically much easier to build and operate safely and is used to demonstrate the operation of a fusor. The picture on the right is of a preliminary run of my first demo fusor.
</p>
<!--Paragraph Four-->
<p>
<b>WARNING:</b>
</p>
<!--Paragraph Five-->
<p>
Before we begin the tutorial, I would like to point out that although this machine is of a very simple design and can be built from essentially junk, does NOT mean it is by any means safe. The minimum operating voltage for most demo fusors are 2-6kv and 10-30kv for fusors achieving fusion reactions. High voltages are extremely dangerous and the high voltage supplies discussed can and most likely will kill you if an accident occurs or you misuse them. The Hazards and Safety section will go into more detail about the all possible hazards presented and how to deal with them accordingly.
</p>
<!--Paragraph Six-->
<p>
Understand that this is a dangerous experiment that if done improperly, has the potential to harm or kill you or others who do not follow proper safety measures. I do not take any responsibility for death, injury, property damage, potential outrageous energy bills, blown breakers, glowing in the dark, fecaled pants, becoming a green hulk when angry, or failure of experimenter to hold sufficient health, liability or property insurance.
</p>
</div>
<div class="contentSelector">
<a href="section_one.php" title="Next Section">>></a>
</div>
</div>
</div>
<div class="footer">
<a>
Copyright @ 2014 Project Star In A Jar. All Rights Reserved.<br>
Website and Content Created by Joshua Hess <a target="blank" href="http://www.youtube.com/s28400"><u>(s28400)</u></a>
</a>
</div>
</body>
答案 0 :(得分：0)
您的问题并不完全清楚......但您似乎只是在询问如何使用JavaScript制作动画。
这里有一些可用于淡入的代码（取自http://youmightnotneedjquery.com/）：
function fadeIn(el) {
el.style.opacity = 0;
var last = +new Date();
var tick = function() {
el.style.opacity = +el.style.opacity + (new Date() - last) / 400;
last = +new Date();
if (+el.style.opacity < 1) {
(window.requestAnimationFrame && requestAnimationFrame(tick)) || setTimeout(tick, 16)
}
};
tick();
}
fadeIn(el);
或者，如果你正在使用jQuery（不确定标签是否被正确列出），已经为库中的淡入功能做了类似的功能：
$(el).fadeIn();
请注意，以这种方式淡入需要您设置不透明度值（而不是显示值）。
你在问题中也提到过＃34;之前，我只对div类添加了效果，但这不是div＆＃34;。类只是实现CSS样式的一种方式，如果您之前使用过CSS动画，那么相同的CSS动画将适用于几乎任何元素（有些情况下它们会赢得＃t; t） ，你只需要给该元素一个带有你想要的动画的类。由于这不是特定的CSS要求，您可以在这里查看更多信息：https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_animations或在此问题上专门淡出：Using CSS for fade-in effect on page load