How to make an element fade out on click?

P

Porebro2015-09-25 14:57:19

JavaScript

Porebro, 2015-09-25 14:57:19

Roughly speaking, there is a certain block, partially hidden through positioning. By clicking on it, it should slide out smoothly so that all of its hidden part becomes visible. And on a second click, leave again)

<html>
<head>
  <title></title>
  <meta charset="utf-8" />
  <link rel="stylesheet" href="main.css"/>
  <script src="jquery.js"></script>
    <script>
    $(function(){
      $('#popup').click(function(){
        $('#popup').animate({
          'bottom':'0'
        },3000);
      });
    });
    </script>
</head>
<body>
<div id="popup">
  <form>
    <h3>Приветствие</h3>
    <input />
    <input /> 
    <button> Отправить </button>
  </form>
</div>
</body>
</html>

*{
  box-sizing: border-box;
}

#popup{
  padding-left: 10px;
  background: yellow;
  height: 500px;
  width: 300px;
  position: fixed;
  bottom: -440px;
  right: 0;
  border: 1px solid black;
}

input{
  margin: 15px;
  margin-left: 50px;
}

Reply

Answer the question

In order to leave comments, you need to log in

2 answer(s)

L

littleguga, 2015-09-25
@Porebro

Here is the working code
. You have a typo:
but it should be
click(function(){

G

Gregory, 2015-09-25
@grigruss

https://jsfiddle.net/grigruss/yggs84fv/