Tutorial: jQuery Fold Effect Concept And Explanation

In this tutorial, i will explain the concept and ways of making a fold effect in jQuery. Such effect can be apply to different context such as image gallery or even just add on effect for your design work.

Concept

Depending on whether you wish to fold away your content or you wish to fold out your content. Folding in your content will be to pull up the content and slide it outward while folding out your content will be to push your content out and slide it downwards. There are two way of achieving this effect. One is to use the viewport technique which will lengthy your code and complex your stuff but generally give you a better visualize effect than the next effect. The next effect that can achieve this with only few lines of code is typically using CSS and animate function in jQuery.

Coding

On the HTML part, you will most likely will only required the following set of div block

4 thoughts on “Tutorial: jQuery Fold Effect Concept And Explanation

  1. Nice effect!

    Is there a was I could set it up to play automatically when the page loads. Would I modify the area where the .click is called and change it to something else?

    Thanks much, great work!

    Eric

  2. Hey Eric,

    You are correct, you will need to modify the code a bit. In order for it to automatically run through instead of manually click, you will need to use setInterval(). You can try the code below, just replace this demo code with the below code and it will run automatically when page loaded.

    $(function(){
    setInterval(repeatThisEffect, 2000);

    })
    var i = -1;
    var myImage = $('div.image');
    var totalImg = $('div.image').length;
    var repeatThisEffect = function(){
    var currentImg = myImage[totalImg-1];
    $(currentImg)
    .animate({height: 50+'px'}, 500)
    .animate({width: 0+'px'}, 500, function(){$(currentImg).css('z-index', i);
    $(currentImg).css({height: 350+'px', width: 600+'px'});});
    i--;
    totalImg--;
    if(totalImg < 0) totalImg = $('div.image').length;}

    Since we can't use 'this' anymore (we don't know which 1 is 'this' as there are no one clicking the image anymore) so we have to manually loop through and since it is a stack (first in last out) so box 4 will be at the top. Therefore, we will start with the total amount of image until it reaches -1 and reset back to total image. Good luck!

Comments are closed.