CODEWITHSUNDEEP
javascriptjquery
MvM
MvM

Reputation: 15

js animation not working on first click

I'm a noob when it comes to javascript. I basically edited a code that someone helped me out with earlier. And it works exactly how I want it. It just doesn't animate on the first click. But after the first click it works fine.

Heres the js code:

$(function() {
"use strict";

var isOpen = true;

$('#box').on('click', function() {
if (isOpen) {
  animate(false);
    isOpen = false;
    } else {
    animate(true);
    isOpen = true;
    }
});
});

function animate(action) {
    if (action) {
    $('#left-div').animate({ left: '0' }, 600);
    $('#right-div').animate({ left:'30vw'}, 600);
        $('#close').hide();
    $('#open').show();
} else {
    $('#left-div').animate({ left: '0' }, 600);
        $('#right-div').animate({ left:'0' }, 600);
        $('#close').show();
    $('#open').hide();
}
}

Here's the Demo

Upvotes: 1

Views: 168

Answers (1)

Anand Singh
Anand Singh

Reputation: 2363

Check this ...

	$(function() {
  	"use strict";

  	var isOpen = true;

	$('#box').on('click', function() {
  	if (isOpen) {
      animate(false);
      	isOpen = false;
    	} else {
      	animate(true);
      	isOpen = true;
    	}
  	});
	});

	function animate(action) {
		if (action) {
    	$('#left-div').animate({ width: '30vw' }, 600);
			$('#close').hide();
    	$('#open').show();
  	} else {
    	$('#left-div').animate({ width: '0' }, 600);
			$('#close').show();
    	$('#open').hide();
  	}
	}
* {
  padding: 0;
  margin: 0;
}

#post-wrapper{
width: 100vw;
}
#post-wrapper > *{
  display: inline-block;
}
#left-div {
  width: 30vw;
  height: 100vh;
  background: green;
}

#left-content{
  color: white;
  padding: 5px 10px 0px 10px;
  width: 90vw;
}

#right-div{
  display: inline-block;
  position: absolute;
  top: 0vw;
  width: 100vw;
  height: 100vh;
  background: navy;
}

#right-content {
  color: white;
  margin: 5px 0px 0px 50px;
}
#close{
  text-align: center;
  position: absolute;
  width: 20px;
  height: 20px;
  margin-top: 5px;
  margin-left: 10px;
  background: red;
  cursor: pointer;
}

#open {
  text-align: center;
  position: absolute;
  width: 20px;
  height: 20px;
  margin-top: 5px;
  margin-left: 10px;
  background: red;
  cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="post-wrapper">

  <div id="left-div">
    <div id="left-content">
    <p>Text</p>
    </div>
  </div>
    
  <div id="right-div">
   <div id="box">
     <div id="close">+</div>
     <div id="open">X</div>
   </div>
    <div id="right-content">
    <p>More text
    </p>
    </div>
  </div>

</div>

Upvotes: 1

Related Questions