Question

我隐藏了div元素以扩展另一个div区域。我只想替换'transition：width .3s easy-out; 'with'easyoutbounce'with jquery，这是我的fiddle。我应该从以下代码中添加/更改什么？

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

Answer 1

这是带有代码的easeOutBounce动画。我将“后退”和“展开”触发的动画分开，以便将来使它们具有不同的动画。

A2

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

Answer 2

这是easyOutBounce的有效示例代码：

Installation Guide ("Updating the tnsnames.ora File")

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

我正在寻找如何与您的代码混合使用：-）

用轻松的反弹动画扩展div

2 个答案: