html jQuery效果 - 幻灯片开始

Posted 2021-05-11

* {
  margin: 0px;
  padding: 0px;
}

body {
  font-family: 'Roboto', sans-serif;
  font-size: 20px;
  color: #555;
}

section {
  width: 5in;
  margin: 24px auto;
  text-align: center;
}

section h1.question {
  color: white;
  background-color: purple;
  padding: 24px;
  font-weight: 500;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}

section p.answer {
  border: 1px gray solid;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
  padding:36px 0px;
}

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

$(function() {
  console.log("ready");

  //hide the answer
  $('section p.answer').hide();

  //listen for a click on the question
  $('section h1.question').click(function() {

    //slideDown() the answer
    //$('section p.answer').slideDown();

    //update the above code using slideToggle ()
    $('section p.answer').slideToggle();

  });

  /*challenge: fade the text in after the p slides down (hint: start with text at opacity 0, either through the css or the js)*/

  //if you have extra time, try out other effects

  //close jQuery ready function	
});

jQuery effect-slide start
-------------------------


Forked from [glenda drew](http://codepen.io/glendadrew/)'s Pen [target practice complete](http://codepen.io/glendadrew/pen/wMPpKr/).

A [Pen](http://codepen.io/spencermathews/pen/vLjPBm) by [Spencer Mathews](http://codepen.io/spencermathews) on [CodePen](http://codepen.io/).

[License](http://codepen.io/spencermathews/pen/vLjPBm/license).

<section>
  <h1 class="question">q: what is this: hahahahplop?</h1>
  <p class="answer">a: someone laughing their head off!