Animation goes with Class but not with Id

Question

Animation goes with Class but not with Id

Navigation

#1 by (3 votes)
#2 by (1 votes)

4

The question is: Why THIS example goes like this, but if the JS changed it to the following one, stop walking:

var clicked = 0;
$(".ripple").click(function() {
 var clicked = 1;
 document.getElementById("di").addClass("expanded");
});

javascript html css

asked by Oren Diaz 27.10.2017 в 20:58

source

2 answers

1

It does not work because you are collecting native JavaScript with jQuery, if you want it with native JavaScript it should be like this:

var clicked = 0;
$(".ripple").click(function() {
 var clicked = 1;
 document.getElementById("di").setAttribute("class", "expanded");
});

#di {
  position: fixed;
  background: red;
  width: 30px;
  height: 30px;
  border-radius: 100%;
  overflow: hidden;
  transition: transform 700ms ease-out;
  left: 50%;
  top: 50%;

}
#di.expanded {
  transform: scale(20);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="di" class="ripple">
asds
</div>

That's the solution to your concern, but I reiterate you should not mix jQuery with native JavaScript that way.

answered by 27.10.2017 в 21:14

Habblitar errors in PHP Random and arrays

score 3 · Accepted Answer

The addClass () method belongs to JQuery , so you need to select the element with the function JQuery for the method to work for you;

var clicked = 0;
$(".ripple").click(function() {
 var clicked = 1;
 $('#di').addClass("expanded");
});

If you want to use flat JavaScript, you have the className element or as you have been told in the other answer, setAttribute() . One way would be;

var clicked = 0;
$(".ripple").click(function() {
 var clicked = 1;
 document.getElementById("di").className += " expanded";
});

If you want to see more you can check className