Question

我被我的项目困住了。我需要通过仅使用javascript和css添加淡入和淡出效果下面的代码。请帮我。我创建了这个函数来存储本地存储中的所有数据，当我点击保存按钮时，我想要添加淡入效果的注释。当我删除该笔记时，我希望它在淡出时被删除。只有我添加或删除的音符才会添加或删除效果

这是添加注释的功能：

function saveIt() {   
    var content = document.getElementById("content").value;
    var date = document.getElementById("date").value;
    var time = document.getElementById("time").value;
    var id = Math.floor(Math.random() * 100000);  //creating random id number.

    var note = { id: id, content: content, date: date, time: time };
    notesArray.push(note);

    localStorage.myList = JSON.stringify(notesArray);
    notesNewArray = JSON.parse(localStorage.myList);

    for (var i = 0; i < notesNewArray.length; i++) {
         theId = notesArray[i].id; 
        var output = "<div id='justFade'>" + "<div class='main col-xm-12 col-sm-6 col-md-4 col-lg-3'>" + "<div class='note-bg'>" + "<div id='" + theId + "'" + "onclick='deleteNote(this.id)'>" + "<p id='hide-delete' class='glyphicon glyphicon-remove-circle'></p>" + "</div>" + "<div class='noteContent'>" + notesNewArray[i].content + "</div>" + "<div class='noteDate'>" + notesNewArray[i].date + "</div>" + "<div>" + notesNewArray[i].time + "</div>" + "</div>" + "</div>" + "</div>";        
    }

    document.getElementById("results").innerHTML += output;
    
    
    document.getElementById("msg").innerHTML = ""; //to hide the message for the empty note. 
    document.getElementById("msgDate").innerHTML = "";   //to hide the message for the empty or wrong date. 
    document.getElementById("msgTime").innerHTML = "";   //to hide the message for the empty or wrong date.  
    document.forms['myNotes'].reset(); //reseting the form on saving.
    
    
    function deleteNote(clickedId) {
    var myList = localStorage.myList;
    notesArray = JSON.parse(myList);
    for (var i = 0; i < notesArray.length; i++) {
        if (notesArray[i].id == clickedId) {
            notesArray.splice(i, 1); // searching for the same ID number that the user clicked on and deleting it.
        }
        localStorage.myList = JSON.stringify(notesArray);
        notesNewArray = JSON.parse(localStorage.myList);        

        document.getElementById("results").innerHTML = "";
        getIt(); // calling again to the notes from the local storage.     
    }
}

<!DOCTYPE html>

<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>My Project</title>
        
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
        <link rel="stylesheet" type="text/css" href="css/styles.css">
        <link href="https://fonts.googleapis.com/css?family=Indie+Flower" rel="stylesheet">
        

        

    </head>
     <body id="init">

         <div class="center">
            <img src="img/title.png"  class="img-center" alt="My Task Board" width="876" height="225">          
        </div>

         <div class="container-fluid">             
             <div class="row">
                 <div class="col-sm-4"></div>
                 <div class="col-sm-4">
                    <form id="myNotes" name="myNotes">
                        <div class="form-group">
                             <textarea rows="8" name="myContent" cols="100" class="form-control" id="content" placeholder="type your note here..." required></textarea><br>                            
                             <div><input type="date" class="form-control" id="date" required></div>
                             <div><input type="time" class="form-control" id="time" required></div>
                             <input type="submit" class="btn btn-primary" id="save" value="save">
                             <div id="msg"></div>
                            <div id="msgDate"></div>
                            <div id="msgTime"></div>
                        </div>                                      
                    </form>
                 </div>                    
                 <div class="col-sm-4"></div>
             </div>
         </div>
        <div id="results" class="singleNote"></div>
        <script src="js/myscript.js"></script>
    </body>
</html>

谢谢。

Answer 1

您可以使用jquery来解决此问题。对于任何需要淡入或淡出的元素，你都可以这样做......

$("#div1").fadeIn();
$("#div1").fadeOut();

这是一个解释......的链接 Jquery fade in and out

Answer 2

您需要制作两个SafeHandle函数async和fadeIn()以及一个返回fadeOut()的函数。

使用promise解决函数async意味着其他代码可以继续执行，而不必等待返回先前调用的函数来启动它的执行。因此，即使它们被4个不同的代码行调用，它们似乎同时淡入淡出。

以下是使用普通javascript完成的asynchronously和fade in的简单示例：（运行代码底部的代码段）

fade out

function sleep(ms)
{
  return new Promise(resolve => setTimeout(resolve, ms));
}

async function fadeIn(elmnt)
{
  for(var i=0; i<101; i++)
  {
    document.getElementById(elmnt).style.opacity = i/100;
    await sleep(20);     // Play with the sleep time to suit your needs, in miliseconds
  }
}


async function fadeOut(elmnt)
{
  for(var i=100; i > -1; i--)
  {
    document.getElementById(elmnt).style.opacity = i/100;
    await sleep(20);
  }
}

// Simply call the functions anywhere you want like this
fadeIn('fade_1');
fadeIn('fade_2');

fadeOut('fade_3');
fadeOut('fade_4');

.opacityZero
{
  opacity:0;
}


.opacityOne
{
  opacity:1;
}

.firstDiv
{
  position:relative;
  float:left;
  width:97%;
  border:1px solid #000;
  padding:5px;
}

.secondDiv
{
  position:relative;
  float:left;
  width:98%;
  border:1px solid #000;
  padding:5px;
}

.container
{
  position:relative;
  float:left;
  width:95%;
  margin-top:20px;
  border:1px solid #09f;
  padding:10px;
}

h3
{
  font-family:calibri;
  position:relative;
  float:left;
}

如何添加淡入和淡出

2 个答案: