js анимация не работает при первом щелчке

Question

Я новичок, когда дело доходит до javascript. Я в основном редактировал код, с которым кто-то помогал мне раньше. И он работает именно так, как я этого хочу. Он просто не анимируется при первом нажатии. Но после первого щелчка он отлично работает.

Heres код JS:

$(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(); 
} 
} 

Вот Demo

Answer 1

Проверить это ...

\t $(function() { 
 
    \t "use strict"; 
 

 
    \t var isOpen = true; 
 

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

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

* { 
 
    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>