CODEWITHSUNDEEP
javascriptjqueryslider
mike
mike

Reputation: 1137

how to make a javascript covered slideup?

When you first click the answer text area, it will pop up a message box

Your Answer
Thanks for contributing an answer to Stack Overflow!

Please make sure you answer the question; this is a Q&A site, not a discussion forum.

Provide details and share your research. Avoid statements based solely on opinion; 
only make statements you can back up with an appropriate reference, or 
personal experiences.

enter image description here

I am struggling to implement this in my own system. I have checked the jQuery slideUp function, but it slides the text message box down not up.

Does any one know how to implement it?

I am assuming that it uses JavaScript animation.

Upvotes: 0

Views: 235

Answers (3)

mazlix
mazlix

Reputation: 6293

I'm not sure exactly what you want, is this it? I think you want to use .slideToggle()

HTML

<textarea></textarea>
<div class="msg">
     谢谢你!!
</div>

jQuery

$(".msg").slideToggle();
    $("textarea").focus(function(){
        $(".msg").slideToggle();
    });
    $("textarea").blur(function(){
        $(".msg").slideToggle();
    });

What do you want to appear and when?

Upvotes: 2

mike
mike

Reputation: 1137

<!DOCTYPE html>
<html>
  <head>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <style type="text/css">
      .div1 {
      width:400px;
      height:100px;
      border: 1px solid #777777;
      }
      .div2 {
      width:400px;
      height:100px;
      border: 1px solid #777777;
      overflow:hidden;
      }
      .help {
      background-color:#fefae2;
      border: 1px solid #f3eed5;
      width:400px;
      height:100px;
      margin-top:100px;
      }
      .info-ok{
      font-size: 13px;
      color:#1087a4;
      float:right;
      margin-top:5px;
      margin-right:5px;
      }
      .info-head{
      font-size: 15px;
      font-weight: bold;
      margin-top:15px;
      margin-right:5px;
      }
    </style>
  </head>
  <script type="text/javascript">
    function popdown(){
    $(".help").animate({
    marginTop:"100px",
    }, 1000 );
    }
    function popup(){
    $(".help").animate({
    marginTop:"0px",
    }, 1000 );
    }
  </script>
  <body>
    <div class="div1">a</div>
    <div class="div2">
      <div class="help">
    <a class="info-ok" onclick="popdown()">ok</a>
    <p class="info-head">您的答案</p>
    <p>感谢您对StackPointer做的贡献</p>
    <p>请确保您回答这个问题,这是一个问答网站，而不是一个论坛</p>
    <p></p>
      </div>
    </div>
    <div class="div3">c</div>
    <textarea onclick="popup()"></textarea>
  </body>
</html>

Upvotes: 0

Jatin Dhoot
Jatin Dhoot

Reputation: 4364

Suppose your textarea is like this 

<textarea id='answer'></textarea>

SO you can use

$('textarea#answer').bind('click', function() {alert('Thanks')})

Upvotes: 0

Related Questions