Replacing JS animations with jquery ui fold effect

Question

I am currently using the code below that works great. However, I am experiencing several problems / limitations that make me think that it would be more appropriate to use the jQuery UI fold effect instead of the js animate function.

As I am not very familiar with JS, can you help me adapt the code below to use the jQuery UI merge effect and not the animation function? Many thanks

http://jsfiddle.net/rnjea41y/

JS:

$("a").click(function () { var page = $(this).data("page"); if ($('div:animated').id != page) { var active = $(".fold.active"); // if there is visible fold element on page (user already clicked at least once on link) if (active.length) { active.animate({ width: "0" }, 200) .animate({ height: "0" }, 200, function () { // this happens after above animations are complete $(this).removeClass("active"); }); // clicking for the first time }; if (active.attr("id") != page) { $("#" + page) .addClass("active") .animate({ height: "500px" }, 1000, 'linear') .animate({ width: "500px" }, 400, 'linear') } } }); 

Answer 1

Your code is pretty close to what you need. I think the main problem is your styles and understanding of how they interact with the effect.

The bend effect will show or hide elements depending on their current state. You have a .fold class that runs your .fold with 0x0 pixels and hidden, but what you really want is a rule that describes how your divs look when displayed to your users.

Original:

 .fold { display: none; width: 0; height: 0; position: absolute; } 

Fixed:

 .fold { width: 500px; height: 500px; position: absolute; } 

Since your .fold style now describes the final state of your divs, it no longer has a display: none; rule display: none; . Since you want divs to be hidden first, you have to add Javascript to hide them initially:

 $(".fold").hide(); 

Now, instead of manually animating styles, you can use the bend effect:

Original:

 // if there is visible fold element on page (user already clicked at least once on link) if (active.length) { active.animate({ width: "0" }, 200) .animate({ height: "0" }, 200, function () { // this happens after above animations are complete $(this).removeClass("active"); }) // clicking for the first time } if (active.attr("id") != page) { $("#" + page) .addClass("active") .animate({ height: "500px" }, 1000, 'linear') .animate({ width: "500px" }, 400, 'linear') } 

Updated:

 if (active.length) { active.toggle("fold", function () { $(this).removeClass("active"); }); } // clicking for the first time if (active.attr("id") != page) { $("#" + page) .addClass("active") .toggle("fold"); } 

Now that it all works, I think you will want to play with some settings. The documentation for the bend effect shows that you can set the size of your element, how it folds, and also the folding order. To simulate the link you sent, I would set the size to 5, since your divs have a 5px border. I would also set horizFirst to true , as this shows your example.

I also decided to use toggleClass instead of addClass("active") and removeClass("active") . This led to simpler settings.

Here is the finished product:

 $(".fold").hide(); var foldSettings = { easing: 'linear', duration: 1200, size: 5, horizFirst: true, complete: function () { $(this).toggleClass("active"); } } $("a").click(function () { var page = $(this).data("page"); if ($('div:animated').id != page) { var active = $(".fold.active"); // if there is visible fold element on page (user already clicked at least once on link) if (active.length) { active.toggle("fold", foldSettings); } // clicking for the first time if (active.attr("id") != page) { $("#" + page).toggle("fold", foldSettings); } } }); 

http://jsfiddle.net/z69zofxm/3/

Answer 2

Edit

This took me a huge amount of time than expected due to weird CSS behavior, so the problem was with this rule, which I removed:

 .fold.active { display: inline-block; } 

And the solution is here: http://jsfiddle.net/3tf5ttrf/

 $("a").click(function () { var page = $(this).data("page"); var selected = $("#" + page); var active = $('.fold.active') if (active.length > 0) { if (active.first().is(selected.first())) { console.log('same'); toggleEl(selected); } else { console.log('diff'); toggleEl(active); toggleEl(selected); } } else { console.log('zero'); toggleEl(selected); } }); function toggleEl(el) { el.toggleClass("active"); el.toggle("fold"); } 

Answer 3

Try less JS CSS

 $("li").on("click", function () { var dataPage = $(this).find("a").attr("data-page"); console.log(dataPage); $("[id="+ dataPage + "]").addClass("active").siblings("div.fold").removeClass("active"); $(this).addClass("active").siblings("li").removeClass("active") }); 

 .fold { width: 0px; height: 0px; overflow: hidden; position: absolute; transition: width .8s ease-in-out, height .8s .8s ease-in-out } .fold.active { width: 500px; height: 500px; transition: height .8s ease-in-out, width .8s .8s ease-in-out } #fold1 { border: 5px solid #bada55; background: red } #fold2 { border: 5px solid #fed900; background: aqua } #fold3 { border: 5px solid #223322; background: green } #fold4 { border: 5px solid #55bada; background: purple } ul { position: absolute; top: 50px; right: 50px; list-style-type: none } li.active a{color: red} 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="fold1" class="fold" >Div menu item 1</div> <div id="fold2" class="fold" >Div menu item 2</div> <div id="fold3" class="fold" >Div menu item 3</div> <div id="fold4" class="fold" >Div menu item 4</div> <nav> <ul> <li><a href="#" data-page="fold1">Menu item 1</a> </li> <li><a href="#" data-page="fold2">Menu item 2</a> </li> <li><a href="#" data-page="fold3">Menu item 3</a> </li> <li><a href="#" data-page="fold4">Menu item 4</a> </li> </ul> </nav>