Question

我写了一个asp C＃WebApplication。

我需要＆＃34;淡出＆＃34;在asp文本框中，如果我单击某个单选按钮。（一旦我点击单选按钮，它们就需要淡入）。我怎样才能做到这一点？。我应该使用JS吗？

Answer 1

您可以使用JavaScript创建“行为”，使用CSS来添加样式和效果。

这是一个使用简单JavaScript的示例，不需要jQuery或其他库。该脚本假设您使用visibility和opacity的组合隐藏了您的元素。

它以这种方式运作：

在单选按钮上收听活动change。
当用户选择单选按钮时。
选择单选按钮并添加课程fadeout。
CSS类fadeout包含一个创建动画效果的过渡。

CSS过渡，提供了一种控制动画速度的方法更改CSS属性。而不是采取财产变化立即生效，您可以导致属性中的更改放置一段时间。在这里阅读更多https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions

var txtBox = document.getElementById('txtBox');
var radioMale = document.getElementById('radioMale');
radioMale.addEventListener('change', function() {
  txtBox.classList.add('fadeout');
}.bind(this));

.fadeout {
  visibility: hidden;
  opacity: 0;
  transition: visibility 0s 1s, opacity 1s linear;
}

<input type="radio" name="gender" value="male" id="radioMale"> Male
<br>
<input type="text" id="txtBox">
<br>

这是一个反向示例，当用户选择单选按钮时，您可以使用动画“淡入”文本框。

var txtBox = document.getElementById('txtBox');
var radioMale = document.getElementById('radioMale');
radioMale.addEventListener('change', function() {
  txtBox.classList.add('fadein');
}.bind(this));

.fadeout {
  visibility: visible;
  opacity: 0;
}

.fadein {
  visibility: visible;
  opacity: 100;
  transition: visibility 0s 1s, opacity 1s linear;
}

<input type="radio" name="gender" value="male" id="radioMale"> Male
<br>
<input type="text" id="txtBox" class="fadeout">
<br>

Answer 2

试试这个

1） HTML

<p>Show textboxes
    <input type="radio" name="radio1" id="r1" value="Show">Do nothing
    <input type="radio" name="radio1" id="r2" value="Nothing">
</p>Wonderful textboxes:
<div class="text">
    <p>Textbox #1
        <input type="text" name="text1" id="text1" maxlength="30">
    </p>
</div>
<div class="text">
    <p>Textbox #2
        <input type="text" name="text2" id="text2" maxlength="30">
    </p>
</div>

2） Js 代码

  $(document).ready(function () {
    $("#r1").click(function () {
        $(".text").fadeIn();
    });
    $("#r2").click(function () {
        $(".text").fadeOut();
    });
});

如果单击单选按钮，如何让隐藏的文本框变为可见？

2 个答案: