需要在没有jQuery UI的情况下弹出图标/按钮
需要在没有jQuery UI的情况下弹出图标/按钮
提问于 2015-07-31 13:56:50
我有一个带有保存和重置按钮的表单。我在表格的顶部有一个按钮图标。当用户单击“保存”按钮时，我试图使按钮图标弹出。我不想使用jQuery UI。我已经尝试过了，但是我只想使用简单的CSS和一个简单的onclick javascript函数来完成这项工作。
下面是我使用的弹出CSS：
.bounce{
position: relative;
-webkit-animation: bounce 1s 5;
}
@-webkit-keyframes bounce{
0%{
bottom:5px;
}
25%, 75%{
bottom: 15px;
}
50%{
bottom: 20px;
}
100%{
bottom: 0;
}
}Css运行得很好，但很明显，当页面被加载时，它会反弹，因为我已经将class=“弹出”到按钮图标中。
<button class="container-list bounce" data-toggle="modal" data-target="#container-modal"><img src="images/container-rack.png"></button>我有一个很长的表单，在最后，我有一个按钮容器，如下所示，它有保存和重置按钮。
<div class="container-buttons">
<button class="btn btn-success" id="save_container" type="submit">Save</button>
<button class="btn btn-warning" type="reset">Reset</button>
</div>因此，每当单击“保存”按钮时，如何触发弹出css属性？请帮帮我。:)
回答 1
Stack Overflow用户
回答已采纳
发布于 2015-07-31 14:04:17
单击按钮时必须添加类。通过在1秒后移除类(或动画的长度)，您可以使用相同的按钮再次添加它。
现在，我没有看到您的jQuery或任何东西，所以我将在这里放置一些通用的jQuery：
$('#save_container').click(function () {
var b = $('.container-list');
b.addClass('bounce');
setTimeout(function () {
b.removeClass('bounce');;
}, 1000);
});单击#save_container时，.container-list将获得类.bounce，并在1秒后将其移除(因为我在小提琴中的动画长度为1秒)。
JSFIDDLE
答案2
根据安东尼·格里斯特的建议，你可以翻转操作，然后让它在每一次点击时都能工作。
可以在这把小提琴中找到该解决方案，jQuery如下所示：
$('#save_container').click(function (e) {
var b = $('button.container-list');
b.removeClass('bounce');
window.setTimeout(function() {
b.addClass('bounce');
}, 1);
});在这段代码中，删除.bounce类，然后再添加1ms。在第二小提琴中，$('.container-list')也包含button，但这只是因为HTML有点不同。
您应该选择答案二的原因是它可以一次又一次地被触发，而不必等待类首先被移除。
答案2的学分是@AnthonyGrist！
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/31747990
复制相关文章
相似问题
腾讯云开发者
