如何通过单击另一个div来更改某个文本的不透明度？

Question

我想在模拟网站上点击“Get in Touch”按钮时显示一行文字，如下所示：

我将提交消息的当前不透明度设置为0，因此它不可见，但是当使用css或jQuery单击提交链接时，我将如何将其不透明度设置为1？

Answer 1

如果是模型：

$("#submitButton").on("click", function( e ) {
  e.preventDefault();
  $("#thanks").fadeIn( 800 ); // Show Thanks
});

 #thanks{ display:none; }      /* Hide Thanks */

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Your message:<br>
<textarea></textarea><br>
<a href="javascript:;" id="submitButton"><b>Get in touch</b></a>
<div id="thanks">Thanks for your inquiry!</div>

通常你会在这之前使用success AJAX事件（因为我看到你可能正在提交表格）

CSS（隐藏Tthanks）：

#thanks{ display:none; }

jQuery（表示感谢成功）：

$("#submitButton").on("click", function() {
    $.ajax({
        url: '/mail.php', // or whoever sends stuff
        type: "POST",
        data: $form.serialize(),
        success: function( response ) {
           console.log( response ); // Whatever server echoed on success 
           $("#thanks").show(); // Show THANKS OK?
        },
        error: function (a, b, c) {
            console.log(a, b, c);
        }
    });
});

Answer 2

我的大脑似乎今天没有工作......这对我不起作用，因为我的电脑上没有启用javascript。代码非常简单。

$(".button").on("click", function(){
  $(".feedback").css("opacity", "1");
})

Answer 3

如果您只想显示文本，只需更改不透明度css属性或通过jquery animate来更改元素的不透明度。

<style>
span
{
  opacity: 0;
}
</style>
<input type="text">
<button>
Get In Touch
</button>
<span>Thanks for your inquiry</span>
<script>
$("button").click(function()
{
  $('span').animate({ opacity: 1 },1000);
});
</script>

示例：https://jsfiddle.net/3mb8ep19/2/