JQ淡入 淡出 隐藏 显示 、隐藏和显示（slideToggle）、animate()、slideDown、stop 学习

最新推荐文章于 2023-03-25 17:06:32 发布
最新推荐文章于 2023-03-25 17:06:32 发布
阅读量747 收藏
点赞数
分类专栏： jQuery/javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/DN_XIAOXIAO/article/details/83032625
版权

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("#div1").fadeOut();
    $("#div2").fadeOut("slow");
    $("#div3").fadeOut(3000);
  });
     $("#but2").click(function(){
    $("#div1").fadeIn();
    $("#div2").fadeIn("slow");
    $("#div3").fadeIn(3000);
  });
    $("#but3").click(function(){
    $("p").hide(100);
});
  $("#but4").click(function(){
  $("p").show(200);
});
    $("#but5").click(function(){
    $("p").slideToggle("slow")
    });
    $("#but6").click(function(){
    $("p").animate({left:'120px'},'5000')
    });
    $("#but7").click(function(){
    $("#div1").stop(true)
        $("#div2").stop(true)
        $("#div3").stop(true)
        
    });
});
</script>
</head>

<body>
<p style="background:#98bf21;position:absolute;">以下实例演示了 fadeOut() 使用了不同参数的效果。</p>
    <br>
    <br>
<button>点击淡出 div 元素。</button>
<div id="but2"><button>点击淡入 div 元素。</button></div>
    <br>
    <button id="but3">隐藏</button>
    <button id="but4">显示</button>
    <button id="but5">显示和隐藏</button>
    <button id="but6">动画</button>
        <button id="but7">停止</button>
    <p >以下实例演示了 fadeOut() 使用了不同参数的效果。</p>
<br><br>
<div id="div1" style="width:80px;height:80px;background-color:red;position=absolute"></div><br>
<div id="div2" style="width:80px;height:80px;background-color:green;"></div><br>
<div id="div3" style="width:80px;height:80px;background-color:blue;"></div>

</body>
</html>

 

JS隐藏CSS 块的写法

$('.parameter-container').css('visibility','hidden');  //隐藏方法1

$('.parameter-container').css('display','none');//隐藏方法2

$('.parameter-container').css('display','block');//显示

 写法二：

$('.parameter-container').css({
            display:'none'
        });

$('.parameter-container').css({
            display:'black'
        });

DN_XIAOXIAO
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
jQuery 常用特效实例小结【显示与隐藏、淡入淡出、滑动、动画等】
10-15
本篇文章将深入探讨jQuery中的几个常用特效：显示与隐藏、淡入淡出、滑动以及动画，通过实例代码来帮助理解这些功能。 ### 显示与隐藏 在jQuery中，显示和隐藏元素是最基本的操作之一。`show()`方法用于显示被选...
jQuery 效果 - 滑动 slideDown()与slideUp()与slideToggle()
热门推荐
习惯有你&的博客
01-10 1万+
jQuery 滑动方法可使元素上下滑动。     jQuery slideDown() 方法用于向下滑动元素。     $(selector).slideDown(speed,callback);     可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。     可选的 callback 参数是滑动完成后所执行的函数名称。
展开收起与淡入淡出
m0_56653135的博客
06-08 117
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 开发工具与关键技术： MVC JQ技术 作者：彭智豪 撰写时间：2021/6/7 首先打开 visual studio这个软件，然后引入css和jquery文件，这两个文件对该项目至关重要，一定要引入，要不然会对项目带来不必要的影响； 再设置三个button按...
jquery stop(true,false)的意思
aijue2015的博客
10-29 443
stop 是jQuery中用于控制页面动画效果的方法。运行之后立刻结束当前页面上的动画效果。stop在新版jQuery中添加了2个参数：第一个参数的意思是是否清空动画序列，也就是stop的是当前元素的动画效果还是停止后面附带的所有动画效果，一般为false，跳过当前动画效果，执行下一个动画效果；第二个参数是是否将当前动画效果执行到最后，意思就是停止当前动画的时候动画效果刚刚执行了一般，这...
$(this).next().stop().slideToggle()；是什么意思
weixin_51808237的博客
03-25 271
所以，当执行$(this).next().stop().slideToggle()时，如果下一个兄弟元素当前是隐藏的，它将被展开；如果下一个兄弟元素当前是展开的，则将被收起。而stop()方法用于停止在同一个元素上运行的之前的动画，以避免动画重叠或者混乱。这是一个jQuery代码片段，它的作用是找到当前元素的下一个兄弟元素，并切换其显示和隐藏状态。本答案由ChatGpt生成。
JQ方法Toggle，slideToggle等防止重复点击的动画效果
阿毛的博客
03-26 719
$(this).stop().slideToggle(); 加上stop()方法即可：stop() 是jQuery中用于控制页面动画效果的方法。运行之后立即停止当前页面上的动画效果。 $(selector).stop(stopAll,goToEnd) stopAll 可选。规定是否停止被选元素的所有加入队列的动画。 goToEnd 可选。规定是否允许完成当前的动画。 ...
jQuery学习动画效果基础
最新发布
10-30
jQuery学习动画效果基础是指使用jQuery库来实现网页中的动画效果，包括显隐动画、滑块动画、淡入淡出动画和自定义动画等。通过掌握这些基本动画效果，可以丰富网页的交互性和视觉效果，提高用户体验。
JQuery学习文档
09-11
- **滑动**：`slideDown()`, `slideUp()`, 和 `slideToggle()`实现元素的滑动显示和隐藏。 - **自定义动画**：`animate()`方法允许创建自定义动画，如改变元素的宽度、高度、透明度等。 6. **遍历和过滤** - **...
从零开始学习jQuery
07-29
1. **淡入淡出**：`fadeIn()`, `fadeOut()`, `fadeToggle()`用于元素的显示和隐藏。 2. **滑动效果**：`slideUp()`, `slideDown()`, `slideToggle()`实现元素的滑动效果。 3. **自定义动画**：`animate()`方法允许...
从零开始学习jQuery (七) jQuery动画实现 让页面动起来
10-28
除了基本的`fadeIn()`和`fadeOut()`，jQuery还提供了`slideToggle()`、`slideUp()`和`slideDown()`等方法，它们分别用于切换、向上滑动隐藏和向下滑动显示元素。此外，`animate()`函数可以自定义动画效果，例如改变...
jQuery效果 slideToggle() 方法(在隐藏和显示之间切换)
12-10
实例 通过使用滑动效果，在显示和隐藏状态之间切换 <p> 元素： 代码如下:$(“.btn1”).click(function(){ $(“p”).slideToggle(); }); 定义和用法 slideToggle() 方法通过使用滑动效果（高度变化）来切换元素的可见状态。 如果被选元素是可见的，则隐藏这些元素，如果被选元素是隐藏的，则显示这些元素。 语法 $(selector).slideToggle(speed,callback)参数 描述 speed 可选。规定元素从隐藏到可见的速度（或者相反）。默认为 “normal”。 可能的值： 毫秒 （比如 1500） “slow” “
jquery animate实现鼠标放上去显示离开隐藏效果
10-27
本文为大家介绍下使用jquery animate实现鼠标放上去显示,离开就隐藏的效果，感兴趣的朋友可以参考下哈，希望对大家有所帮助
slideToggle()和toggleClass()的用法
FEE
12-01 1799
slideToggle()通过高度变化来切换所有匹配元素的可见性，并在切换完成后可选地触发一个回调函数。对应slideUp()和slideDown() 注意：在使用slideToggle()进行显隐内容时，在响应式页面下，切记不要在前面添加.stop()如：$(this).stop().slideToggle();在内容即将显示或隐藏时继续点击，会出现如下情况，当屏幕变大或缩小，页面内容高度应有所
jQuery 之 .stop() 方法
weixin_30853329的博客
04-25 240
总结version 1.7版本前.stop([clearQueue][,jumpToEnd])clearQueue: 布尔值，默认是 false;此值处理是相关的动画队列是否移除，如果为 false 时，则停止当前的动画，后面的动画按队列进行。如果为 true,则全部移除动画jumpToEnd:布尔值，默认是 false,此值处理的是相关动画是立即完成还是按队列顺序完成，如果为 false,则按队...
jQuery 效果——动画队列及其停止排队方法
qq_39368007的博客
11-28 284
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title&gt...
jQuery animate动画详解
林中明月间丶
08-21 7649
// animate():第一个参数：{width:200} 运动的值和属性 // 第二个-时间：默认400ms{},1000 //第三个-运动形式-两种：1.默认：swing(慢快慢) 2.linear(匀速) //第四个-回调函数 //$(this).animate({width:"300px",height:"300px"},2000,'linear',function(){alert(12...
jQuery动画-上卷和下拉
Xiaoming's Blog
01-13 2585
语法：$(selector).slideDown( [duration ] [, complete ] )
编写代码实现图片的上滑，下滑，淡出，淡入，隐藏，显示
06-02
好的，以下是使用jQuery实现图片上滑、下滑、淡出、淡入、隐藏和显示的代码示例： HTML代码： ```html <img id="myImage" src="image.jpg" alt="图片"> ``` jQuery代码： ```javascript // 图片上滑 $("#myImage").slideUp(); // 图片下滑 $("#myImage").slideDown(); // 图片淡出 $("#myImage").fadeOut(); // 图片淡入 $("#myImage").fadeIn(); // 图片隐藏 $("#myImage").hide(); // 图片显示 $("#myImage").show(); ``` 上述代码中，`#myImage` 是图片的ID，`slideUp()`、`slideDown()`、`fadeOut()`、`fadeIn()`、`hide()`、`show()`是jQuery提供的动画效果方法。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值