javascript jQuery 使用 CSS 动画在单击时切换不透明度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/21918477/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery Toggle Opacity On Click Using CSS Animation
提问by Holabola
I'm probably just retarded, but I can't seem to get this to work. All I'm trying to do is make it so when you click something (In this case, #register), it changes a few lines of css.
我可能只是智障，但我似乎无法让它发挥作用。我想要做的就是让它在您单击某些内容时（在本例中为#register），它会更改几行 css。
I want to make it so when you click it once, it appears, then if you click it again, it will disappear. I wrote this, and when you first click it, it will show it, but when you click it again, it won't disappear. I just can't figure out what I'm doing wrong. XD Thank you for any help you can give :P
我想让它当你点击一次它时出现，然后如果你再次点击它它就会消失。这是我写的，第一次点击时会显示，但是再次点击时不会消失。我只是想不通我做错了什么。XD 感谢您提供的任何帮助 :P
My Javascript
我的 JavaScript
$(document).ready(function () {
$('#registerButton').click(function () {
if ($("#register").css("opacity") === ".9") {
$("#register").css({
"opacity": "0"
});
$("#register").css({
"height": "0px"
});
}
if ($("#register").css("opacity") === "0") {
$("#register").css({
"opacity": ".9"
});
$("#register").css({
"height": "260px"
});
}
});
});
EDIT:I'm trying to use it this way so I can make some nice looking css animations, so just using the toggle functionwouldn't work :(
编辑：我正在尝试以这种方式使用它，以便我可以制作一些漂亮的外观css animations，因此仅使用它toggle function是行不通的:(
回答by Kyle Needham
Option 1
选项1
If you want to just toggle it hidden/visible you could just do
如果您只想将其切换为隐藏/可见，您可以这样做
$('#registerButton').on('click', function()
{
$('#register').toggle();
});
Option 2
选项 2
If you want to use CSS animations you can use toggleClasslike this;
如果你想使用 CSS 动画，你可以这样使用toggleClass；
$('#registerButton').on('click', function()
{
$('#register').toggleClass('show hide');
});
And then add your css selectors like this
然后像这样添加你的css选择器
.show
{
display: block;
height: 260px;
}
.hide
{
display: none;
height:0;
}
Option 3
选项 3
Using if statements checking opacity
使用 if 语句检查不透明度
$('#registerButton').on('click', function()
{
var register = $('#register');
// register is not visible lets make it visible.
if(register.css('opacity') === '0')
{
register.css({
'opacity': '0.9',
'height': '260px'
});
}
else //We know the opacity is not 0 lets make it 0.
{
register.css({
'opacity': '0',
'height': '0'
});
}
});
See working fiddle of option 3 here http://jsfiddle.net/rnhV5/
在此处查看选项 3 的工作小提琴http://jsfiddle.net/rnhV5/
