jQuery hide()无法获取'duration'设置要被识别

jQuery hide() Cannot get 'duration' setting to be recognized

本文关键字：设置 duration 识别 hide 获取 jQuery      更新时间：2023-09-26

似乎找不到答案。

我试图在隐藏<li>元素时动画hide()。我有一个<span>内部的<li>，作为一个"删除"按钮。

这是我似乎做不到的部分。

$('#list1').on('click', 'li span', function(event) {  
  $(this).parent().hide(1000); 
});

列表项实际上是隐藏的。然而，期限并没有生效。该项目正在消失，没有任何形式的"动画"。

下面是它的作用:https://jsfiddle.net/scampione/effnuct0/14/

感谢您的帮助。

似乎在这里工作良好，一旦我包含jQuery。

如评论中所述，jQuery Slim不包含您正在使用的动画。你需要包含完整的jQuery库。

var buildArray = function(max) {
  var rtnArray = [];
  var i = 0;
  for (i = 1; i <= max; i++) {
    rtnArray.push(i);
  }
  return rtnArray;
}
var feedBack = $('.display-feedback');
var delButton = '<span class="delete-item">X</span>';
var appendToList = function(theStr) {
  var target = $('#list1')
  target.append('<li>' + theStr + delButton + '</li>')
}
$('.clear-feedback').on('click', function() {
  feedBack.empty();
});
$('#list1').on('click', 'li span', function(event) {
  $(this).parent().hide(1000);
});
$('#list1').on('click', 'li', function(event) {
  feedBack.text(event.type + " - " + event.target.nodeName + " - " + event.currentTarget);
});
var myArray = buildArray(10);
appendToList(myArray)
appendToList(myArray.map(num => num * 7));
appendToList(myArray.filter(num => num > 5));
appendToList(myArray.map(num => num * 7).filter(num => num > 35));
.container {
  height: auto;
  border: solid 1px cornflowerblue;
  border-radius: 5px;
  padding: 10px;
  margin-bottom: 30px;
  font-family: Arial;
  color: #717171;
}
.output-list {
  list-style: none;
  background-color: #ffffff;
  padding: 5px;
  border: solid 2px #77ddbb;
  border-radius: 5px;
}
.output-list li {
  display: flex;
  justify-content: space-between;
  background-color: #44bbee;
  border-radius: 5px;
  color: white;
  padding: 5px;
  margin: 5px;
}
.output-list > span {
  display: inline-block;
  padding: 5px;
  margin: 5px;
  border: solid 1px #a0a0a0;
  border-radius: 5px;
}
.delete-item {
  color: #e0e0e0;
  padding: 3px;
  border-radius: 5px;
}
.delete-item:hover {
  color: #ffffff;
  cursor: pointer;
}
.feedback {
  display: flex;
  justify-content: space-between;
  align-content: flex-start;
}
.clear-feedback {
  width: 39px;
  height: 20px;
  padding: 3px;
  border-radius: 5px;
  text-align: center;
  background-color: #aabbcc;
  color: white;
}
.clear-feedback:hover {
  background-color: #778899;
}
.clear-feedback:active {
  background-color: #556677;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <ul class="output-list" id='list1'>
    <span>a &ltspan&gt in list 1</span>
    <li>this &ltLI&gt is from HTML
      <span class='delete-item'>X</span>
    </li>
  </ul>
  <div class="feedback">
    <div class='display-feedback'></div>
    <span class='clear-feedback'>Clear</span>
  </div>
</div>

Hide除了一个速度参数，试着去掉函数args里面的li，只让它说span

相关文章：