1

I hide the div element to expand another div area. I just want to replace 'transition: width .3s ease-out; 'with' easeoutbounce 'with jquery, here is my fiddle. what should I add / change from the following code?

(function() {
var page = document.body,
    btn = document.getElementById('expmain');
btn.onclick = function() {
    page.className = (/(^| )main-visible( |$)/.test(page.className)) ?
        page.className.replace(/main-visible/,"") :
            page.className + " main-visible";
    // Toggle the toggle navigation title too...
    this.title = (this.title == "expand!") ?
        "back!" :
            "expand!";

    return false;
};
})();
Dhimas AFanji
  • 91
  • 9
  • do you want to replace your vanilla js code with jquery and be able to use jquery easeoutbounce effect ? Or do you only want to change your current css 'transition: width .3s ease-out' with the jquery's easeoutbounce css equivalent ? – PierreN Jul 06 '18 at 18:42
  • actually i want to get bounce effect with jquery, maybe you can help me change my bit code – Dhimas AFanji Jul 06 '18 at 18:57

2 Answers2

2

here is the easeOutBounce animation with your code. I kept the animations triggered by "back" and "expand" separate so you could make them have separate animations in the future. 

(function() {
 var page = document.body,
  btn = document.getElementById('expmain');
 btn.onclick = function() {
  page.className = (/(^| )main-visible( |$)/.test(page.className)) ?
   page.className.replace(/main-visible/,"") :
    page.className + " main-visible";
        
  // Toggle the toggle navigation title too...
  this.title = (this.title == "expand!") ?
   "back!" :
    "expand!";

  return false;

 };
  
  //the animation for when you click 'expand'
  $(".open").on("click", function(){
   $(".left-sec").animate({width:"100%"},300, 'easeOutBounce');
  });
  //the animation for when you click 'back'
  $(".close").on("click", function(){
   $(".left-sec").animate({width:"83%"},300, 'easeOutBounce');
  });

})();
a{color: #fff}
.left-sec {
  background: blue;
    float: right;
    overflow: hidden;
    /*transition: width 0.3s ease-out 0s;*/
    width: 83%;
    height: 120px;
}

#navigasi {display: block; background: black}

#time {
   height: 120px;
  background: yellow;
    float: left;
    overflow: hidden;
    padding: 2%;
    width: 13%;
}
#post {
    line-height: 120px;
    text-align: center;
}
.close {display: none}
.main-visible .open{display: none}
.main-visible .close{display: inline}
/*.main-visible .left-sec{width: 100%;}*/
.main-visible #time{display:none;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3.2/jquery.easing.js"></script>
<div class="left-sec">
  <div id="navigasi">
    <a id="expmain" title="expand!" href=".left-sec">
     <span class="open">expand</span>
     <span class="close">back</span>
    </a>
  </div>
<div id="post">1234567</div>
</div>

<div id="time"/>
wade king
  • 353
  • 4
  • 14
1

Here is working sample code for easyOutBounce :

https://jsfiddle.net/newzy08/xpvt214o/372035/

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3.2/jquery.easing.js"></script>

<div id="tester" style="display: none;"></div>

<script language="Javascript">
    $( document ).ready(function() {
        $('#tester').slideToggle(1000,'easeOutBounce');
    });
</script>

<style>
    #tester {
        background-color: #900;
        height: 300px;
        width: 300px;
    }
</style>

I'm looking how to mix with your code :-)

PierreN
  • 968
  • 4
  • 11