Плъзгач JQuery вертикален и хоризонтален
Реших да си поиграя малко с преводите, затова взех няколко статии за напълно различни проблеми на уеб разработката. Първият от тях се оказа бележка от Карл Сведберг, описваща възможностите на jQuery за внедряване на нестандартни сгъваеми ефекти - плъзгачи. Преводът е доста безплатен. Не се опитах да дам интерлинерен превод, както често правят другите, за да не бъде преводът на езика. Насърчава се конструктивната критика. Така…
Въпреки че jQuery има голям набор от плъзгачи - .slideDown (), .slideUp () и .slideToggle (), понякога се нуждаете от персонализиран ефект на слайда. За щастие това не е проблем.
Обратен вертикален плъзгач
Вградените слайдшоута анимират блока надолу. Но какво, ако искаме да завъртим плъзгача обратно - отдолу нагоре? Номерът е да се използват прости CSS стилове. Нека започнем с някои основни HTML маркировки:
За да разширим вътрешния DIV нагоре, ще избутаме долната му граница до долната граница на родителския блок (в този пример - # demo-slidebottom).
За този пример бяха използвани други свойства, като например ширина, подложка, поле и цвят на фона, но списъкът показва само тези, които са необходими за изпълнение на ефекта на сгъване.
Сега можем да използваме същия код на jQuery, който бихме използвали за реализиране на традиционен плъзгач.
Хоризонтални плъзгачи
Също така можем да свием елементи наляво и надясно. Най-лесният начин е да анимирате свойството width .
Въпреки че анимацията на ширината на блока е добре, аз изобщо не съм доволен от поведението на текста, който е вътре в блока. Един от начините за избягване на обвиването на текст е използването на свойството white-space: nowrap CSS, но това ще разруши всичко, ако количеството текст надвишава ширината на блока.
Свиване наляво
Друг начин да избегнете свиването на текста е да анимирате лявото свойство на елемента. В този случай е много важно елементът да е позициониран абсолютно, тъй като не можем да преместим елемент, който има относително или статично позициониране.