0

I've never asked a question on here before so my apologies if I make a mistake.

I have 4 divs all stacked on top of each other that I want to, when the .trigger div is clicked, fold out into a 2x2 grid using CSS to animate it and JQuery to toggle the class. 

<head>
 <meta charset="UTF-8">
 <title>Animations</title>
 <link href="main.css" rel="stylesheet" type="text/css"/>
 <script type="text/javascript" src="jquery-1.12.1.min.js"></script>
 <script type="text/javascript">

   $(‘.trigger’).on(‘click’,function(){
      $(this).toggleClass(‘clicked’);
   });

 </script>
</head>

<body>

<div class="trigger">
  <div class="box1"></div>
  <div class="box2"></div>
  <div class="box3"></div>
</div>

</body>

And the CSS:

.trigger {
 background-color: pink;
 width:200px;
 height:200px;
 position: relative;
}

.box1 {
 width:200px;
 height:200px;
 background-color: blue;
 transition: transform 300ms cubic-bezier(0.42, 0, 0.24, 2.17);
 pointer-events: none;
 position: absolute;
}

.box2 {
 width:200px;
 height:200px;
 background-color: yellow;
 transition: transform 300ms cubic-bezier(0.42, 0, 0.24, 2.17);
 pointer-events: none;
 position: absolute;
}

.box3 {
 width:200px;
 height:200px;
 background-color: red;
 transition: transform 300ms cubic-bezier(0.42, 0, 0.24, 2.17);
 pointer-events: none;
 position: absolute;
}

.trigger.clicked .box1 {
 transform:translate(200px,200px)rotate(180deg);
}

.trigger.clicked .box2 {
 transform:translate(200px)rotate(90deg);
}


.trigger.clicked .box3 {
  transform:translateY(200px)rotate(90deg);
}

I know the animation works because I can get it to work with a hover on the .trigger element as the trigger it's only when I try to trigger the animation using JQuery that it does nothing. I've tried looking on here for similar questions but a lot of them seem to have to do with not loading the JQuery properly but I know that my JQuery is loaded properly as I tested out a simple alert function before putting in the toggleClass function as shown here:

And I know shame on me for using inline JS but it was just meant to be an exercise haha. I'm a complete novice at Jquery so it's liable to be something with my syntax but I can't see what it is. Anyone know what I've done wrong?

Cheers everyone.

Corona15
  • 21
  • 4
  • wrap code in `$(function(){ /* code here */ })` or move script tag after the elements the code is looking for. – charlietfl Jul 05 '16 at 01:14
  • how did you confirm it's a duplicate? i can see other couple of issue , the jquery file source looks dodgy and the ' he's using might cause issues as well – Mina Jacob Jul 05 '16 at 01:20
  • Thanks guys. Wrapping it in that bit of code and then replacing the ' with " fixed the problem. – Corona15 Jul 05 '16 at 02:02

0 Answers0