stackoom
  简体   繁体   中英

My fadeOut function (animation) doesn't work

 原文  2018-06-10 11:50:36  7   2    javascript/ jquery/ html/ css/ fade

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. 

 $("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>

2 answers

solution1
 0  2018-06-10 12:02:35

You are missing JQuery script: 

  <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>

solution2
 0  2018-06-10 12:16:19

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 . Example you can set red for testing. In JS you are required to mention parameters on fadeToggle 

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

Here, 2000 stands for 2second . You can increase as you wish. For more detail you are required to check document on http://api.jquery.com/fadetoggle/

I have edited on codepen : https://codepen.io/hirakumar/pen/aKpQNN?editors=0001

暂无
暂无

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

Related Question why does my jquery function fadeOut work but slice doesn't work? fadeOut() on scrollTop() == 0 doesn't work JavaScript fadeOut function doesn't work on second call jQuery animation doesn't work for my navbar jQuery .fadeOut then wait, then .fadeIn doesn't work fadeIn() doesn't work but fadeOut() is ok JQuery fadeOut() and fadeIn() functions doesn't work fadeOut -> fadeIn doesn't work properly Why doesn't this animation function work? Why fadeIn(), fadeOut(), show(400), hide(400) animations doesn't work in my case?
Related Tags
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM