开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

奇怪的jQuery行为 - slide()

您好！您提到的问题是关于jQuery的slide()函数。jQuery是一个流行的JavaScript库，它可以简化HTML文档的遍历、操作和事件处理。slide()函数是一个用于创建滑动效果的函数，它可以使元素在显示和隐藏时产生平滑的动画效果。

当您遇到奇怪的jQuery行为时，可能是由于以下原因：

未正确加载jQuery库：请确保您已正确引入jQuery库，并且在使用slide()函数之前加载。
错误的选择器：请检查您的选择器是否正确选中了您想要滑动的元素。
未引入jQuery的UI库：slide()函数是jQuery UI库的一个函数，如果您没有引入该库，将无法使用slide()函数。
使用了不兼容的jQuery版本：请确保您使用的jQuery版本与您的代码兼容。

以下是一个简单的示例，展示如何使用slide()函数：

<!DOCTYPE html>
<html>
<head>
 <title>jQuery Slide Example</title>
 <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
 <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
 <style>
    #box {
      width: 100px;
      height: 100px;
      background-color: red;
    }
  </style>
</head>
<body>
  <div id="box"></div>
 <button onclick="$('#box').slideUp()">Slide Up</button>
 <button onclick="$('#box').slideDown()">Slide Down</button>
 <button onclick="$('#box').slideToggle()">Slide Toggle</button>
</body>
</html>

在这个示例中，我们创建了一个红色的方块，并使用slide()函数控制其显示和隐藏。请确保您的代码与示例类似，并检查是否存在上述问题。如果问题仍然存在，请提供更多详细信息，以便我们更好地帮助您。

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

fullPage.js全屏滚动插件

如果你要制作一个全屏的网页，使用这个插件在合适不过，如QQ浏览器官方网站直接下载使用方法 1.引入fullpage.css文件 <link rel="stylesheet" type="text/css" href="css/jquery.fullPage.css"> 2.引入jq 和 fullpage.js文件 <script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script> <script

02

【Java 进阶篇】JQuery 事件绑定之事件切换：让页面动起来

欢迎来到这个充满动感的 JQuery 事件绑定之旅！在这篇博客中，我们将深入研究 JQuery 中的事件切换，让你的页面焕发出活力和互动。无论你是前端小白还是有一定经验的开发者，相信这篇文章都会对你有所帮助。

02

手机侧滑导航栏

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" /> <meta name="apple-touch-fullscreen" content="yes" /> <meta name="apple-m

03

unslider源码分析

根据Bootstrap中文网的介绍，Unslider一个超小的 jQuery轮播(slider)插件，参照这个汉化版的介绍页面，这个插件有你需要的优点，但是本文是抱着学习的态度，学习如何实现轮播插件，所以有些细节可能有所忽略。

02

jQuery练习——下拉菜单

实现效果：当鼠标移到不同的一级菜单，会显示相应的二级菜单，鼠标移走，二级菜单消失。

02

swiper实现图片轮播功能

swiper是一个相当强大的图片展示插件，下面我来介绍一下swiper的简单图片轮播功能。一般情况下我们所说的图片轮播就是在一个区域内有几张图片循环展示，有的可以滑动图片观看下一张图，有的可以点击图下方的小点来选择哪个图，也有点击两侧的左右按钮来切换图片展示。我们先来看一下如何实现

01

bootstrap carousel 轮播

<!doctype html> <html> <head> <meta charset="utf-8"> <title>联想控股</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="css/bootstrap.css" rel="stylesheet" type="text/css"> <script src="http://code.jquery.com/jquery.js"></script> <script src="js/bootstrap.js"></script> </head> <body>

First slide

Second slide

Third slide

</body> </html>

03

bootstrap轮播图实现

2.轮播速度设置在整个轮播设置data-interval=“1000”设置轮播速度，1000=1m，单位是毫秒

03

自实现PC端jQuery版轮播图

最近其他项目不是很忙，被安排给公司的官网项目做一个新的页面（之前没接触公司官网项目），其中有一个用到轮播图的地方，最开始想直接用swiper.js插件实现就好了，可是发现官网项目里之前都没有引入过swiper.js，后来想了想，就不引入它了，免得又得增加依次一次网络请求，项目里既然已经用到了jQuery，那就索性用jQuery写一个轮播图吧。

02

自己实现PC端jQuery版轮播图

最近其他项目不是很忙，被安排给公司的官网项目做一个新的页面（之前没接触公司官网项目），其中有一个用到轮播图的地方，最开始想直接用swiper.js插件实现就好了，可是发现官网项目里之前都没有引入过swiper.js，后来想了想，就不引入它了，免得又得增加依次一次网络请求，项目里既然已经用到了jQuery，那就索性用jQuery写一个轮播图吧。

BootStrap做图片轮播效果（解析）

做不同的好看的效果一直是做一个小前端的目标，都希望可以做出不一样的页面，炫酷的页面，但是技术有的时候跟不上的时候只能是模仿，看别人是怎么做的，其实模仿的过程也就是学习的一个过程，能看明白别人的代码也是一种进步，今天就简单的讲述一下如果用bootStrapUI框架做一个图片轮播的效果。

03

自实现PC端jQuery版轮播图

最近其他项目不是很忙，被安排给公司的官网项目做一个新的页面（之前没接触公司官网项目），其中有一个用到轮播图的地方，最开始想直接用swiper.js插件实现就好了，可是发现官网项目里之前都没有引入过swiper.js，后来想了想，就不引入它了，免得又得增加依次一次网络请求，项目里既然已经用到了jQuery，那就索性用jQuery写一个轮播图吧。现在把自己写的轮播图这块代码单独拿出来，做一个小demo写在这里记录一下（demo中轮播图的图片网上随意找的）实现的效果：　　　　1、自动轮播（轮播时间间

07

10个有用的jquery 图片插件

jquery的灵活性为我们所熟知并热爱。给人映象最深的jquery应用通常与图片相关。事实上，你可以借助jquery来处理图片达到给你的项目增添令人惊奇的功能！这里筛选了10个非常有用的jque

04

轮播图swiper框架的基本使用

[前端CSS高频面试题]如何画0.5px的边框线（详解） CSS3基础属性大全 CSS3动画属性 animation详解（看完就会） CSS3 transform 2D转换之移动旋转缩放（详细讲解看完就会） CSS3 Z—Index 详解 CSS3 positon定位详解（通俗易懂）

05

jQuery幻灯片插件slick

支持响应式浏览器支持 CSS3 时，则使用 CSS3 过度/动画支持移动设备滑动支持桌面浏览器鼠标拖动支持循环支持左右控制支持动态添加、删除、过滤支持自动播放、圆点、箭头、回调等等兼容

03

Bootstrap图片轮播/幻灯图片（Carousel）效果实例整理

如果按照从前需要在网站上加上幻灯片、图片轮播效果，早年老蒋做企业网站的时候是使用的Flash焦点图，后来用jquery幻灯片，虽然手边平时都积累备用几款常用的效果，毕竟这类的实例代码网上很多。但是，如果我们有使用Bootstrap框架那就更简单了，因为脚本框架中内置Carousel可以快速实现。

03

简单的滑动条

今天要做个滑动条如图：用jqueryUI实现 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <tit

Servlet与Jsp的结合使用实现信息管理系统一

PS：1：先介绍一下什么是Servlet？ Servlet（Server Applet）是Java Servlet的简称，称为小服务程序或服务连接器，用Java编写的服务器端程序，主要功能在于交互式地浏览和修改数据，生成动态Web内容。狭义的Servlet是指Java语言实现的一个接口，广义的Servlet是指任何实现了这个Servlet接口的类，一般情况下，人们将Servlet理解为后者。Servlet运行于支持Java的应用服务器中。从原理上讲，Servlet可以响应任何类型的请求，但绝大多数情况下S

09

Bootstrap幻灯轮播如何支持触屏左右滑动手势？

最近ytkah在学习用bootstrap搭建网站，Bootstrap能自适应pc端和手机端，并且移动设备优先，适合现如今移动营销。bootstrap是封装好的框架，需要某些功能只需调用相应的组件就可以，但有些还是没加入，比如幻灯轮播触屏左右滑动手势就不支持，大家用的设备基本是触屏的了，能用滑动交互在小屏幕上体验会更好，那么如何实现呢？一个比较简单的方法是增加一个滑动手势js插件：hammer.js，网上有很多cdn调用地址，像//cdn.bootcss.com/hammer.js/2.0.8/hamme

05

python测试开发django-191.Bootstrap3 轮播图（Carousel）

前言 Bootstrap3 实现轮播图滚动显示轮播图（Carousel）只需替换成自己本地图片/static/a1.png即可实现轮播图 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" type="text/css" href="/static/bootstrap3.4/css

01

get几个小技能：轮播图插件、进度条插件、筛选过滤插件

最近参加了一个网页设计大赛，趁这个机会做了一个个人简历的网页：点击欣赏用到了许多有趣的东西们今天分享一下。

02

20款移动开发中很有用的 jQuery 插件

在开发任何移动项目时，要尽可能保持每一种资源尺寸都尽可能的小，以给最终用户提供一个好的体验是非常重要的。在这篇文章中我们已经编制了今年新出炉的 jQuery 移动插件列表，收集了滑块，旋转木马，画廊，

07

2019-08-09 满屏切换vue项目中使用 vue-fullpage.js

演示效果自带引用bug.png 把Dn()函数注释掉即可.png 安装 npm install vue-fullpage.js 引用 // 引用fullpage 插件 import 'fullpage.js/vendors/scrolloverflow'; import VueFullPage from 'vue-fullpage.js'; Vue.use(VueFullPage); 在组件中使用 <full-page :options="options" ref="page">

03

JavaScript实现图片轮播

test2.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

00

HTML粘性滑块导航页面Demo - 可自由填充内容

HTML粘性滑块导航页面Demo 点击查看效果 HTML 代码 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"

01

Dragdealer拖动组件

官网： http://skidding.github.io/dragdealer/ https://github.com/skidding/dragdealer

02

bootstrap框架基础知识点整理

注意: 任意元素使用了布局容器的样式，都会称为布局容器，建议使用div作为布局容器

04

Swiper实现全屏视觉差轮播

Swiper作为当代流行的js框架，非常受到青睐，这里演示swiper在pc端全屏视觉轮播的效果，这也是pc端常用的一种特性

03

Swiper开篇

swiper是一款轻量级以及免费的移动设备触控滑块的js框架，主要运用于移动端的操作，但也可以用于pc端页面效果制作，完全的开源免费，

02

jquery中hide、show、slideUp、slideDown、animate应用

<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>jquery_slip.html</title> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> $(docum

04

jquery slide 幻灯片

因为图片1-5是使用行内块的方式布局，只要控制图片1的div的margin-left改变，就可以跟推箱子一样，实现5个图片的左右滑动。

03

jquery fullpage 插件增加头部和版权的方法

一个页面，我们通过 jquery-fullpage 插件来制作，整个是全屏滚动的。但是，我们希望在最后一页增加一个版权，大概只有 100px 高，而不需要一个全屏来放版权。怎么做呢？搜索了一下，说了各种方法。什么修改源码啦之类的，或者自己写代码判断啦。晕死。其实，官方给出了解决方案。

02

jquery中html、before、after、append、prepend应用

<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>jquery_slip.html</title> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> $(docum

09

bootstrap使用教程_bootstrap 教程

我们在开发前端页面的时候，如果每一个按钮、样式、处理浏览器兼容性的代码都要自己从零开始去写，那就太浪费时间了。所以我们需要一个框架，帮我们实现一个页面的基础部分和解决一些繁琐的细节，只要在它的基础上进行个性化定制就可以了。

02

jquery mobile 移动web(1)

轻量级框架jQuery Mobile 　　所需文件　　　　<link rel="stylesheet" href="jquery.mobile-1.1.2/jquery.mobile-1.1.2.css"/> 　　　　<script type="text/javascript" src="jquery.mobile-1.1.2/jquery-1.6.4.js"></script> jquery 应放在 mobile 上面。　　　　<script typ

06

前端工程师在业余时间如何提高自身能力——造轮子

造轮子是一种快速的学习方式，而还有一种进阶则可以是从Github中生成轮子。总的来说就是： 1. 查看很多Github项目的源码及提交历史 2. 写胶水代码生成自己的框架下面就是我之前造的一些轮子的过程：一、 SPA框架两年多以前，当时我们项目用的技术栈是：Backbone + Mustache + jQuery。在我们当时的环境下，主要组成有： 1. Backbone提供了一个Router 2. Mustache提供了模板 3. jQuery抽象了DOM 4. Ajax请求所以，这就是我造

06

swiper.animate实现轮播展示动画效果

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Swiper demo</title> <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1"> <link rel="stylesheet" href="https://cdn.bootc

01

BootStrap的学习与使用

文章链接: http://silentcow.cn/2020/08/06/BootStrap/

01

bootstrap

花了一天时间学了下bootstrap入门，想必大家用css写前端页面的时候都很痛苦，bootstrap就是来解决这个问题的，它封装了css的很多样式，开发的时候直接拿来用就可以了，提高了开发效率

03

JavaWeb——一文快速入门BootStrap（栅格系统、全局CSS样式、组件、插件、基于BootStrap的官网案例实战）

BootStrap是一个前端开发的框架，Bootstrap是美国Twitter公司的设计师Mark Otto和Jacob Thornton合作基于HTML、CSS、JavaScript 开发的简洁、直观、强悍的前端开发框架，使得 Web 开发更加快捷。

03

家乡主题网页设计代码旅游主题网页设计 html静态网页设计制作 dw静态网页成品模板素材网页 web前端网页设计与制作 div静态网页设计

家乡旅游景点网页作业制作网页代码运用了DIV盒子的使用方法，如盒子的嵌套、浮动、margin、border、background等属性的使用，外部大盒子设定居中，内部左中右布局，下方横向浮动排列，大学学习的前端知识点和布局方式都有运用，CSS的代码量也很足、很细致，使用hover来完成过渡效果、鼠标滑过效果等，使用表格、表单补充模块，为方便新手学习页面中没有使用js有需要的可以自行添加。 ❤ 【作者主页——🔥获取更多优质

02

UNITE Gallery-图片库插件（DLE 13及更高版本）

Unite Gallery是一个基于jquery库的多用途jаvascript库。它采用模块化技术构建，注重易用性和定制性。自定义图库，使用CSS更改其皮肤，甚至编写自己的主题都非常容易。但是，这个画廊非常强大，快速，并具有大多数现代功能，例如响应能力，触摸控制甚至缩放功能，这是一种独特的效果。

03

06-移动端开发教程-fullpage框架

CSS3的新特性已经讲完了，接下来我们看一下jQuery的一个全屏jQuery全屏滚动插件fullPage.js。我们经常见到一些全屏的特绚丽页面，手指或者鼠标滑动一下就是一整屏切换，而且还有各种效果。比如：全屏滑动案例下面我们就介绍一下jQuery的fullPage.js的如何使用及常用的配置。 1. fullpage.js的主要功能 fullPage.js是一个基于jquery的插件，它能很方便的制作出全屏网站，github地址。主要功能有：支持鼠标滚动。支持前后退和键盘控制。多个回调函数。

09

Swiper做轮播图

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" conten

03

【技巧】ionic3独享滚动区域之滑动segment

其实这两个列表是公用ion-content的滚动条的，也就是说，当列表1滚动到一定距离，当切换到列表2显示时，列表2已滚动到列表1所在的位置了（效果图我就不上了），鉴于此，我们可以在每个div外面再包一层，此层的滚动区域代替ion-content的滚动区域。在这里，我示范使用ion-slides作为容器层来实现：

02

06-移动端开发教程-fullpage框架

CSS3的新特性已经讲完了，接下来我们看一下jQuery的一个全屏jQuery全屏滚动插件fullPage.js。我们经常见到一些全屏的特绚丽页面，手指或者鼠标滑动一下就是一整屏切换，而且还有各种效果。比如：全屏滑动案例

05

第122天：移动端开发常见事件和流式布局

可以看到，在京东各个模块的主容器中，都设置了最大最小宽度和宽度100%，而在导航区块中，由于一行有5个小区块，所以设置了宽度为20%，使得小区块也能达到自适应的效果。

04

selectToUISlider

没错，就是这个公能，最近做一个WEB的项目，也要用到类似的功能，所以呢就研究了一下，刚开始的时候，记得Jquery UI里面有一个slider的东西，可以实现类似滑块的东西，研究了一下，发现Jquery UI里的slider没法满足我的需求，所以就继续上网search，找了半天，终于找到了selectToUISlider这个Jquery的插件。

03

jQuery学习笔记

jQuery函数位于一个document ready函数中，我们需要在js中加载该函数文档

03

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭