使用CSS和Jquery使字段显示

Make field appear using CSS and Jquery

本文关键字：字段 显示 Jquery CSS 使用      更新时间：2023-09-26

我只是想创建一个字段，如果用户单击按钮将出现。我知道这同样适用于CSS中的简单目标，但在我的使用中，我需要按照我尝试的方式来做。我知道它有很多CSS，但我认为它不应该太难检查。

这是我的尝试:

function brief() {
  $('.envelope-wrapper').toggleClass('animate');
}
.envelope-wrapper {
  opacity: 0;
  width: 735px;
  height: 440px;
  left: 50%;
  margin-left: -367px;
  top: 300px;
  margin-top: -220px;
  border-radius: 10px;
  box-shadow: 0 0 3px rgba(0, 0, 0, .3);
  overflow: visible;
  background: #008da9;
}
.envelope-wrapper.animate {
  -webkit-animation-name: visible;
  -webkit-animation-duration: 2s;
  -webkit-animation-direction: forward;
  -webkit-animation-timing-function: ease-out;
}
@-webkit-keyframes visible {
  0% {
    opacity: 0;
  }
  10% {
    opacity: 10;
  }
  90% {
    opacity: 10;
  }
  100% {
    opacity: 0;
  }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div onclick="brief()" class="gogogo">go</div>
<div class="envelope-wrapper"></div>

这可能是因为envelope-wrapper似乎在gogogo元素的顶部形成了一个覆盖，这将不会触发点击事件。

为两个元素设置position:relative。

.gogogo {
    position: relative;
}
.envelope-wrapper {
    position: relative;

检查小提琴

0和1的不透明度值也不同

@-webkit-keyframes visible {
    0% {
        opacity: 0;
    }
    10 {
        opacity: 0.1;
    }
    90% {
        opacity: 0.9;
    }
    100% {
        opacity: 1;
    }
}

Check Update Fiddle

为什么不直接使用jQuery。http://api.jquery.com/fadetoggle/

相关文章：