Question

我正在创建一个按钮，单击该按钮将显示用户填写的电子邮件输入。这是有效的，我只想平稳过渡，所以行动不是“生涩”。

这是按钮和表单的HTML

<button id="work" onclick="workyes()">Sign Up!</button>
<div id="workyes" class="invisible">
    <form><input type='email'></form>
</div>

我正在使用的CSS：

button {
border: 0;
background: #5786c1;
color: white;
padding: 8px 14px;
font-weight: bold;
font-size: 18px;
text-decoration: none;
display: inline-block; /* needed for anchors */
position: relative;
box-shadow: 1px 0px #3a587f, 0px 1px #4171ae,
          2px 1px #3a587f, 1px 2px #4171ae,
          3px 2px #3a587f, 2px 3px #4171ae,
          4px 3px #3a587f, 3px 4px #4171ae,
          5px 4px #3a587f, 4px 5px #4171ae,
          6px 5px #3a587f, 5px 6px #4171ae;
           -webkit-transition: all 1s; /* For Safari 3.1 to 6.0 */
           transition: all 1s;
           max-height: inherit;

}
button:hover {
box-shadow: none;
  -webkit-transition: all 1s; /* For Safari 3.1 to 6.0 */
transition: all 1s; 
}
.invisible {
display: none;
}
.visible {
display: block;
}

将所有这些联系在一起的JS：

function workyes() {
var box = $('#work');
var form = $('#workyes');
box.toggleClass('invisible');
form.toggleClass('visible');
}

我有一个悬停转换，但是当我将.invisible或.visible类添加到脚本时，我无法使用它。

有没有办法让CSS过渡工作或在另一个中添加效果。

Answer 1

我认为你可以在toggleClass();函数中添加第二个参数，指定延迟转换的持续时间：

function workyes() {
  var box = $('#work');
  var form = $('#workyes');
  box.toggleClass('invisible', 1000);
  form.toggleClass('visible', 500);
}

或者，您可以使用fadeToggle();，slideToggle();或fadeIn(); / fadeOut();函数。

注意 - 你应该使用jQuery的点击功能而不是onclick html属性。

HTML

<button id="clickToShowForm">Sign Up!</button>
<div class="hidden">
    <form><input type='email'></form>
</div>

CSS

.hidden {
  display:none;
}

jQuery

$('clickToShowForm').click(function(){
  $('hidden').fadeToggle();
});

https://api.jquery.com/toggleClass/

http://api.jquery.com/fadetoggle/

Answer 2

也许你可以尝试使用jquery中的fadeIn和fadeOut函数，当动画结束时，添加/删除类？（虽然不再需要......）

<button id="work">Sign Up!</button>
<div id="workyes" class="invisible">
   <form id="workyes">
      <input type='email'>
   </form>
</div>

你最好使用jquery选择器而不是＆＃39; onclick＆＃39;关于元素本身的事件。

$("#work").click(function () {
   $(this).fadeToggle("slow", function () {
      $(this).toggleClass('invisible'); 
      $('#workyes').fadeToggle("slow", function () {
         $('#workyes').toggleClass('visible').focus(); 
      });
   });
});

我认为不再需要toggleClass行吗？也许你出于其他原因使用那些课程......所以我把它们留在......

在这里查看演示：https://jsfiddle.net/bff1y83b/

通过JS添加类时应用CSS转换

2 个答案: