What am I doing wrong is there something missing?

Question

What am I doing wrong is there something missing?

hiteshramola opened this issue 8 years ago · 0 comments

Here's my code the animation won't work.!!


<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Simple animation</title>

<!--JQUERY-->
<script
  src="https://code.jquery.com/jquery-3.2.1.js"
  integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE="
  crossorigin="anonymous"></script>
    
  <!--  FOUNDATION-->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.3.1/css/foundation.css" />
  <script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.3.1/js/foundation.js"></script>
  
<!-- MOTION UI FOR FOUNDATION-->
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/motion-ui/1.2.2/motion-ui.css" />
  <script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.3.1/js/plugins/foundation.util.motion.js"></script>

  <style>
	  
	  .contact
	  .cntbtn{}
	  .cntpop{}
	  
	  
	</style>
</head>

<body>

<p>
	<button type="button" class="button" data-toggle="motion-example-1"  aria-controls="motion">Fade</button>
	<button type="button" class="button" data-toggle="motion-example-2"  aria-controls="motion">Slide</button>
</p>

<div class="row">
  <div class="small-6 columns">
    <div data-toggler data-animate="fade-in fade-out" class="callout secondary ease" id="motion-example-1">
      <p>This panel <strong>fades</strong>.</p>
    </div>
  </div>
  <div class="small-6 columns">
    <div data-toggler data-animate="slide-in-down slide-out-up" class="callout secondary ease" id="motion-example-2">
      <p>This panel <strong>slides</strong>.</p>
    </div>
  </div>
</div>

</body>
</html>