Сегодня я поделюсь с вами небольшим примером использования анимата для достижения скользящего эффекта переключения
Все знают, что jQuery предоставляет некоторые методы для достижения скользящего эффекта:
1.Sliddown ()
2.slideup ()
3.slidetoggle ()
Тем не менее, приведенное выше скольжение не удобно для управления направлением его скольжения, поэтому давайте напишем его сами. Полем Полем
Код заключается в следующем:
<! Doctype html> <html> <head> <meta charset = "utf-8"> <meta http-equiv = "x-ua-совместимый" content = "ie = edge, chrome = 1"> <Title> Примеры </title> <meta name = "texta ="> <> <meta name = "ключевые слова" content = "content =" content = "content =" content = "content =" content = "content =" content = "content =" content = "content =" content = "content =" content "" тело {ширина: 100%; Высота: Авто; } .content {width: 150px; Высота: 50px; позиция: абсолютно; Верх: 20px; Слева: 20px; переполнение: скрыто; фоновый цвет: красный; } .slide-box {width: 300px; позиция: относительно; } .slide1 {width: 150px; Высота: 50px; Плавание: осталось; дисплей: встроенный блок; высота линии: 50px; Текст-альбом: Центр; фоновый цвет: #bdd8cf; } .slide2 {width: 150px; Высота: 50px; Поплавок: верно; дисплей: встроенный блок; высота линии: 50px; Текст-альбом: Центр; фоновый цвет: #c1c4c4; } </style> </head> <body> <div> <div> <pan> элемент в левой </span> <pan> элемент справа </span> </div> </div> <script src = "js/jquery-1.11.2.min.js" type = "text/javascript" charset = "utf-8"> </script> <script = javascript "charset =" utf-8 " $ (function () {$ (". Content"). Hover (function () {$ (". Slide-box"). Stop (true) .Animate ({right: "150px"}, 'Slow');}, function () {$ ("... Slide-box"). Stop (true) .Animate (right: "0"}, 'slow'); </body> </html>Приведенный выше код может достичь полного скользящего эффекта. Но одна вещь, чтобы отметить,
Как показано на рисунке выше, необходимо добавить событие STOP (), чтобы предотвратить множественные события, генерируемые, когда мышь быстро движется, образуя команду стека, вызывая эффект скольжения или даже мигания после удаления мыши.
Приведенная выше статья Animate реализует эффект скользящего переключения [пример кода] - это все контент, которым я делюсь с вами. Я надеюсь, что вы можете дать вам ссылку, и я надеюсь, что вы сможете поддержать Wulin.com больше.