单击时按钮消失,显示选择加入表单。很酷的效果。这该怎么做?

时间:2015-04-07 23:20:48

标签: javascript jquery css

我想实现此页面上发生的事情:http://yogatime.tv/

当您点击“请求邀请”时,该按钮会消失,并且会在其位置显示一个简洁的选择加入形式。我检查了css和源代码,无法对此进行排序。

任何人都知道如何做到这一点?

谢谢, 马修

3 个答案:

答案 0 :(得分:0)

当您单击按钮时,他们将按钮样式设置为" display:none"同时他们将表单样式设置为" display:inline-block"。

为了使其看起来像平滑过渡,它们也会改变元素的不透明度。

答案 1 :(得分:0)

可能发生的事情是,他们淡出第一个盒子,将另一个元素放入其中,然后将其淡入。这是一个基本的例子:



document.getElementById('target_1').onclick = function() {
  document.getElementById('target_1').classList.add('active');
  setTimeout(function() {
    document.getElementById('target_1').style.display = 'none';
    document.getElementById('target_2').classList.add('active');
  }, 600);/*time*/
};

#target_1 {
  border: 1px solid #AAA;
  border-radius: 10px;
  height: 20px;
  width: 300px;
  text-align: center;
  line-height: 20px;
  font-size: 14px;
  opacity: 1;
  transition: all 600ms ease;/*time*/
}
#target_1.active {
  opacity: 0;
}
#target_2 {
  border: 1px solid #AAA;
  border-radius: 20px;
  height: 20px;
  width: 300px;
  text-align: center;
  line-height: 20px;
  font-size: 14px;
  opacity: 0;
  transition: opacity 600ms ease;/*time*/
}
#target_2.active {
  opacity: 1;
}

<div id="target_1">Div1</div>
<div id="target_2">Div2</div>
&#13;
&#13;
&#13;

答案 2 :(得分:0)

试试这个

https://jsfiddle.net/1xwvas49/3/

<强> HTML

<body>
    <button id="target">Request Invite</button>
    <form id="result">
        <input id="btn" type="text">
        <input id="btn" type="submit">
    </form>
</body>

<强> CSS

body{
    background-image: url('http://www.aisquared.com/blog/wp-content/uploads/2010/11/yoga.jpg')
}

#target{
    border-radius:10px;
    background-color:white;
}

<强> JS / jquery的

$( "#target" ).click(function() {
  $(this).css('display', 'none');
    $('form').fadeIn(1000)
});