我的fadeOut功能（动画）不起作用

Question

I have problem here; 我在这里有问题。

$("#anan").click(function(){
    $("input[type='text']").fadeToggle();
});

I would like my input box to disappear and appear with a fade effect. 我希望输入框消失并出现淡入淡出的效果。 Currently, it only appears and disappears without a fading effect. 当前，它仅显示和消失而没有褪色效果。 Can someone help me as to why it doesn't fade in/out? 有人可以帮我为什么它不淡入/淡出吗？

Note: In the preview, it doesn't even disappear/appear for some reason but when I actually run the html on Chrome it functions alright, except the fading animation. 注意：在预览中，由于某种原因，它甚至没有消失/显示，但是当我在Chrome上实际运行html时，它的功能正常，除了淡入淡出的动画。

 $("ul").on("click", "li", function() { $(this).toggleClass("completed"); }); $("ul").on("click", "span", function(event) { $(this).parent().fadeOut(500, function() { $(this).remove(); }); event.stopPropagation(); }) $("input[type ='text']").on("keypress", function(event) { if (event.which === 13) { var inputtext = $(this).val(); $(this).val(""); $("ul").append("<li><span><i class='fas fa-trash'></i></span> " + inputtext + "</li>") } }) $("#anan").click(function() { $("input[type='text']").fadeToggle(); });

 h1 { background: #2980b9; color: white; margin: 0; padding: 10px 20px; text-transform: uppercase; font-size: 24px; font-weight: normal; } ul { list-style: none; margin: 0; padding: 0; } .fa-plus { float: right; } body { background: #ff6e7f; /* fallback for old browsers */ background: -webkit-linear-gradient(to right, #bfe9ff, #ff6e7f); /* Chrome 10-25, Safari 5.1-6 */ background: linear-gradient(to right, #bfe9ff, #ff6e7f); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */ font-family: Roboto; } li { background: #fff; height: 40px; line-height: 40px; color: #666; } input { font-size: 18px; color: #2980b9; background-color: #f7f7f7; width: 100%; box-sizing: border-box; padding: 13px 13px 13px 20px; border: 3px solid rgba(0, 0, 0, 0); } input:focus { background: #fff; border: 3px solid #2980b9; outline: none; } li:nth-child(2n) { background: #f7f7f7; } li span { background: #e74c3c; height: 40px; margin-right: 20px; text-align: center; color: white; width: 0; display: inline-block; transition: 0.2s linear; opacity: 0; } li:hover span { width: 40px; opacity: 1.0; } #container { width: 360px; margin: 100px auto; background: #f7f7f7; box-shadow: 0 0 3px rgba(0, 0, 0, 0.1); } .completed { color: gray; text-decoration: line-through; }

 <!DOCTYPE html> <html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <title>ToDo List App</title> <script type="text/javascript" src="assets/js/lib/jquery-3.3.1.min.js"> </script> <link rel="stylesheet" type="text/css" href="assets/css/styles.css"> <link href="https://fonts.googleapis.com/css?family=Roboto:400,500,700" rel="stylesheet"> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous"> </head> <body> <div id="container"> <h1>To-Do List <span id="anan"><i class="fas fa-plus"></i></span></h1> <input type="text"> <ul> <li><span><i class="fas fa-trash"></i></span> Go to Potions Class</li> <li><span><i class="fas fa-trash"></i></span> Buy new robes</li> <li><span><i class="fas fa-trash"></i></span> Visit anan</li> </ul> </div> <script type="text/javascript" src="assets/js/mycustom.js"> </script> </body> </html>

Answer 1

You are missing JQuery script: 您缺少JQuery脚本：

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

 $("ul").on("click", "li", function(){ $(this).toggleClass("completed"); } ); $("ul").on("click", "span", function(event){ $(this).parent().fadeOut(500, function(){ $(this).remove(); }); event.stopPropagation(); } ) $("input[type ='text']").on("keypress", function(event){ if(event.which === 13) { var inputtext = $(this).val(); $(this).val(""); $("ul").append("<li><span><i class='fas fa-trash'></i></span> "+ inputtext + "</li>") } }) $("#anan").click(function(){ $("input[type='text']").fadeToggle(); });

 h1 { background: #2980b9; color:white; margin: 0; padding: 10px 20px; text-transform: uppercase; font-size: 24px; font-weight: normal; } ul { list-style: none; margin: 0; padding: 0; } .fa-plus{ float:right; } body { background: #ff6e7f; /* fallback for old browsers */ background: -webkit-linear-gradient(to right, #bfe9ff, #ff6e7f); /* Chrome 10-25, Safari 5.1-6 */ background: linear-gradient(to right, #bfe9ff, #ff6e7f); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */ font-family: Roboto; } li { background: #fff; height: 40px; line-height: 40px; color: #666; } input { font-size: 18px; color: #2980b9; background-color: #f7f7f7; width: 100%; box-sizing: border-box; padding: 13px 13px 13px 20px; border: 3px solid rgba(0,0,0, 0); } input:focus{ background: #fff; border: 3px solid #2980b9; outline: none; } li:nth-child(2n){ background: #f7f7f7; } li span { background: #e74c3c; height: 40px; margin-right: 20px; text-align: center; color: white; width: 0; display: inline-block; transition: 0.2s linear; opacity: 0; } li:hover span { width: 40px; opacity: 1.0; } #container { width: 360px; margin: 100px auto; background: #f7f7f7; box-shadow: 0 0 3px rgba(0,0,0, 0.1); } .completed { color: gray; text-decoration: line-through; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <link rel="stylesheet" type="text/css" href="assets/css/styles.css"> <link href="https://fonts.googleapis.com/css?family=Roboto:400,500,700" rel="stylesheet"> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous"> <div id="container"> <h1>To-Do List <span id="anan"><i class="fas fa-plus"></i></span></h1> <input type="text"> <ul> <li><span><i class="fas fa-trash"></i></span> Go to Potions Class</li> <li><span><i class="fas fa-trash"></i></span> Buy new robes</li> <li><span><i class="fas fa-trash"></i></span> Visit anan</li> </ul> </div> <script type="text/javascript" src="assets/js/mycustom.js"> </script>

Answer 2

in our codepen you have not included jquery and in your css that text box background is #f5f5f5 which is same as it's background.So you need to change text box's background color to see fade effect . 在我们的Codepen中，您没有包含jquery，并且在CSS中，文本框背景是＃f5f5f5，与背景相同。因此，您需要更改文本框的背景色以查看淡入淡出效果。 Example you can set red for testing. 您可以将示例设置为红色进行测试。 In JS you are required to mention parameters on fadeToggle 在JS中，您需要在fadeToggle上提及参数

$("input[type='text']").fadeToggle("2000", "linear");

Here, 2000 stands for 2second . 在这里，2000代表2秒。 You can increase as you wish. 您可以根据需要增加。 For more detail you are required to check document on http://api.jquery.com/fadetoggle/ 有关更多详细信息，您需要检查http://api.jquery.com/fadetoggle/上的文档

I have edited on codepen : https://codepen.io/hirakumar/pen/aKpQNN?editors=0001 我已经在Codepen上进行了编辑： https ://codepen.io/hirakumar/pen/aKpQNN ? editors = 0001

我的fadeOut功能（动画）不起作用

问题描述

2 个解决方案

解决方案1
0 2018-06-10 12:02:35

解决方案2
0 2018-06-10 12:16:19

我的fadeOut功能（动画）不起作用

问题描述

2 个解决方案

解决方案1 0 2018-06-10 12:02:35

解决方案2 0 2018-06-10 12:16:19

解决方案1
0 2018-06-10 12:02:35

解决方案2
0 2018-06-10 12:16:19