It is necessary to realize the smooth appearance of "hidden" sites. In order to make it clearer, I cite an example from the design, when you hover over a block, it should, as it were, “move” forward, i.e. the hidden part should smoothly appear over all the blocks.

alt text

Are there any scripts already written for such purposes? Writing from scratch is expensive, you need to take into account the overlapping of angles from neighboring blocks.

I do not ask you to write a solution, but I want to hear ideas on this matter. Thank!

PS: the display was made through a change in z-index, but it does not look nice - the picture is jerking sharply.

    2 answers 2

    $('#block').css('opacity', 0).hide(); $('.element').hover( function(){ $('#block').show().animate({'opacity': 1}, 300); }, function(){ $('#block').animate({'opacity': 0}, 300, function(){$(this).hide();}); } );

    I guess you were looking for something like that?

    • This completely hides the blocks, and in me they should all be visible. It is necessary to change the layers in some places smoothly. - metazet
    • one
      Then at the idea level: create a clone of the block, display it in the same place as the original, but with a z-index + 100 and smoothly change its transparency. At the end of the animation, delete the original. Or do you have all the blocks in the same coordinates? - ling
    • The blocks are located at different coordinates, fixed as in the design provided in the question ... Thank you for the idea, very interesting :) Maybe something will come out of this! - metazet

    If I understand correctly, you need to block when you hover on it smoothly crawled out from under the other block forward, so that the content was visible. Html markup does not change, you need to assign a new z-index value, so that it comes out ahead and so that it does not immediately jump out, but do it smoothly. If everything is correct, then you can use the jquery ui toggleClass effect. It allows you to smoothly change the class of elements, for example, a class from z-index: 1 to a class from z-index: 99; in the settings you can select any visual effect or animation.

    • With the z-index, such manipulations do not work ... Now I’m picking with the animate, maybe it will work out ... :) - metazet
    • Look here for an example, blocks go by click pastehtml.com/view/b2hu0yfxw.html - makregistr
    • I did not delve into the code, but apparently there was made according to the idea proposed by @ling. Already solved the problem, thanks for the help :) - metazet