CODEWITHSUNDEEP
javascriptcssanimationrotationtransform
Melvin
Melvin

Reputation: 150

JavaScript changing CSS not working inside of if statement

Here is my html :

<a class="btn btn-primary btn-lg" id="signUpBtn" href="./pages/createaccount.php" onmouseover="rotateBtn()"> Sign up &raquo;</a>

Here is the JS... the style changes don't work when I take it out of the if statement. I need the if statement to toggle back and forth between the two rotations. Doing this to learn, want to use JS and also see how it works with jQuery

function rotateBtn() {
var isRotated = 0;
document.getElementById("signUpBtn").style.transformOrigin = "top center";
document.getElementById("signUpBtn").style.transition = "1s ease-in-out";

if (!isRotated) {
    document.getElementById("signUpBtn").style.transform = "rotateY(90deg)";
    isRotated = 1;
} 

if (isRotated) {
    document.getElementById("signUpBtn").style.transform = "rotateY(0deg)";
    isRotated = 0;
}

Upvotes: 1

Views: 733

Answers (5)

Temani Afif
Temani Afif

Reputation: 272789

I think you don't need to use an if else statement, you only need to add a delay between both animation. So you may try this :

You need to make your element inline-block or block for the rotation to work.

document.getElementById("signUpBtn").style.transformOrigin = "top center";
document.getElementById("signUpBtn").style.display = "inline-block";
document.getElementById("signUpBtn").style.transition = "1s ease-in-out";

function rotateBtn() {
  document.getElementById("signUpBtn").style.transform = "rotateY(90deg)";

  setTimeout(function() {
    document.getElementById("signUpBtn").style.transform = "rotateY(0deg)";
  },1000);
}
<a class="btn btn-primary btn-lg" id="signUpBtn" href="./pages/createaccount.php" onmouseover="rotateBtn()">
     Sign up &raquo;</a>

You may also do this using only CSS like this :

#signUpBtn {
  display: inline-block;
  transform-origin: top center;
  transition: 1s ease-in-out;
}

#signUpBtn:hover {
  animation: rotate 2s;
}

@keyframes rotate {
  0% {
    transform: rotateY(0deg);
  }
  50% {
    transform: rotateY(90deg);
  }
  100% {
    transform: rotateY(0deg);
    ;
  }
}
<a class="btn btn-primary btn-lg" id="signUpBtn" href="./pages/createaccount.php">
     Sign up &raquo;</a>

Upvotes: 1

Rajkumar Somasundaram
Rajkumar Somasundaram

Reputation: 1270

Actually there were few more issues; I created a wrapper div added css transform on that div. Now it works

document.getElementById("signUpBtn").onmouseover = rotateBtn;
document.getElementById("signUpBtn").onmouseout = unrotateBtn;

function commonStyle() {
document.getElementById("wrapperDiv").style.transformOrigin = "top center";
document.getElementById("wrapperDiv").style.transition = "1s ease-in-out";
}

function rotateBtn() {
commonStyle()
document.getElementById("wrapperDiv").style.transform = "rotate(90deg)";
}

function unrotateBtn() {
commonStyle()
document.getElementById("wrapperDiv").style.transform = "rotate(0deg)";
}
div {
  height:100px;
  width:100px;
}
<div id="wrapperDiv">
<a class="btn btn-primary btn-lg" id="signUpBtn" 
     href="./pages/createaccount.php" >
     Sign up &raquo;</a> 
 </div>

Upvotes: 0

Chandrakant Thakkar
Chandrakant Thakkar

Reputation: 978

If you want to use jQuery then,

function rotateBtn() {
var isRotated = 0; // boolean value
$("signUpBtn").css("transformOrigin","top center");
$("signUpBtn").css("transition","1s ease-in-out");
    if (!isRotated) {
        $("signUpBtn").css("transform", "rotateY(90deg)");
        isRotated = 1;
    } 

    if (isRotated) {
        $("signUpBtn").css("transform", "rotateY(0deg)");
        isRotated = 0;
    }
}

Upvotes: -1

HarshuEdu
HarshuEdu

Reputation: 41

The problem lies in the following code:

if (!isRotated) {
    document.getElementById("signUpBtn").style.transform = "rotateY(90deg)";
    isRotated = 1;
} 

if (isRotated) {
    document.getElementById("signUpBtn").style.transform = "rotateY(0deg)";
    isRotated = 0;
}

After assigning isRotated = 1 in the first if(), the second if() also gets executed because its condition is satisfied.

To avoid this, just include an else statement for the second if()

if (!isRotated) {
    document.getElementById("signUpBtn").style.transform = "rotateY(90deg)";
    isRotated = 1;
} 

else if (isRotated) {
    document.getElementById("signUpBtn").style.transform = "rotateY(0deg)";
    isRotated = 0;
}

Upvotes: 1

Kalabalik
Kalabalik

Reputation: 157

how about setting 

if(isRotated=='0'){
    document.getElementById("signUpBtn").style.transform = "rotateY(90deg)";
    isRotated = 1;
}else if(isRotated=='1'){
    document.getElementById("signUpBtn").style.transform = "rotateY(0deg)";
    isRotated = 0;
}

Upvotes: 0

Related Questions