I know that there are a lot of plug-ins that implement such a mechanism, but they all implement photo sliding. I also need to load a block via ajax and screw the effect to its appearance (so that it goes to the side). Is there any simple plugin to make it easy to understand how this is implemented?

  • as an option AnythingSlider , honestly, I do not know how simple it is inside - Specter

2 answers 2

You have a simple example for understanding the mechanism.

HTML

<div id="slider"> <div id="label"></div> <div id="content">UPS!</div> </div>

CSS

 #slider { position: absolute; width: 200px; height: 200px; border: 1px solid #900; } #label { position: relative; float: right; background: #0C0; height: 200px; width: 25px; border-left: 1px solid #900; cursor: pointer; } #content { position: relative; }

jQuery

 $(function() { var slider = $('#slider'); var label = $('#label'); var cWidth = slider.width() - label.width(); // Ширина контента slider.offset({top: 0, left: -cWidth}); // Прячем на эту ширину слайдер label.toggle( function(){ slider.animate({ left: 0 }, function(){ label.css('background-color','#F00'); }); }, function(){ slider.animate({ left: -cWidth }, function(){ label.css('background-color','#0C0'); }); } ); });

    To understand how animation is done, you need to read the docks in the animation and try yourself to try to move blocks, etc.