gpt4 book ai didi

javascript - jQuery hide() 无法获取要识别的 'duration' 设置

转载 作者:行者123 更新时间:2023-11-28 05:01:12 25 4
gpt4 key购买 nike

似乎找不到这个问题的答案。

我正在尝试为 hide() 制作动画隐藏 <li> 时元素。我有一个 <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>

关于javascript - jQuery hide() 无法获取要识别的 'duration' 设置,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40097504/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com