V2AS问路
jQuery基础入门（二）
阅读原文时间：2023年07月08日阅读：2

显示和隐藏

在 jQuery 中可以使用 hide() 和 show() 方法来隐藏和显示 HTML 元素，以及使用 toggle() 方法能够切换 hide() 和 show() 方法。

在hide()和show()方法中，我们可以让元素隐藏和显示。



Document


我们也可以给显示和隐藏加上时间，例如:

$(()=>{
$("#btn1").click(()=>{
$("#d1").hide(2000);
}),
$("#btn2").click(()=>{
$("#d1").show(2000);
})
})

除了时间，我们还可以加上回调函数，例如:

$(()=>{
$("#btn1").click(()=>{
$("#d1").hide(2000,()=>{
alert("隐藏完毕!");
});
}),
$("#btn2").click(()=>{
$("#d1").show(2000,()=>{
alert("显示完毕!");
});
})
})

除了上述的两个方法，还存在一个toggle()方法，可以对显示和隐藏效果进行取反。

$("#btn3").click(()=>{
$("#d1").toggle(1000,()=>{
alert("取反操作执行完毕!");
})
});

淡入淡出

jq当中，提供了四个方法实现淡入淡出，如下:

  • fadeIn() 淡入隐藏元素
  • fadeOut() 淡出可见元素
  • fadeToggle() 淡入淡出效果切换
  • fadeTo() 渐变到给定透明度 参数: speed,opacity(0-1),callback

例如:

$(()=>{
$("#btn1").click(()=>{
$("#d1").fadeIn(300, function() {
// "slow"、"fast" 或毫秒。
alert("淡入完毕")
});

    })

    $("#btn2").click(()=>{  
        $("#d1").fadeOut(300, function() {  
            // "slow"、"fast" 或毫秒。  
            alert('淡出完毕')  
        });

    })  
    $("#btn3").click(()=>{  
        $("#d1").fadeToggle(300, function() {  
            // "slow"、"fast" 或毫秒。  
            alert('取反完毕')  
        });

    })  
    $("#btn4").click(()=>{  
        $("#d1").fadeTo(300,.4, function() {  
            // "slow"、"fast" 或毫秒。  
            alert('变化完毕')  
        });

    })

});

滑动效果

jQuery 滑动方法可使元素上下滑动。

  • slideDown()
  • slideUp()
  • slideToggle()



Document

hello,world

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque, ipsa doloribus earum quasi qui dolorum maiores pariatur, quibusdam quidem, consequuntur a soluta deserunt fugit placeat nulla modi, maxime neque tempora. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur soluta qui cum aliquid, perferendis tempore voluptas sapiente nostrum, aperiam voluptatem, eos repellendus iure dicta delectus voluptatibus architecto sed vitae maxime. 

</div>


动画

jq当中可以通过animate()来实现动画效果，语法如下:

$(selector).animate({params},speed,callback);

例如：



Document

hello,world


也可以再上一次的基础上继续执行动画:



Document

hello,world


animate()几乎支持所有的css属性，其中设置属性以小驼峰的写法，同时这个方法不支持颜色属性，如果想要支持
颜色属性，需要下载颜色插件:https://plugins.jquery.com/color/

在设置值的时候也可以使用相对值:

$("button").click(function(){
$("div").animate({
left:'250px',
height:'+=150px',
width:'+=150px'
});
});

停止动画

我们可以通过stop()方法停止动画。

语法如下:

$(selector).stop(stopAll,goToEnd);

jQuery stop() 方法用于停止动画或效果，在它们完成之前。

stop() 方法适用于所有 jQuery 效果函数，包括滑动、淡入淡出和自定义动画。

可选的 stopAll 参数规定是否应该清除动画队列。默认是 false，即仅停止活动的动画，允许任何排入队列的动画向后执行。

可选的 goToEnd 参数规定是否立即完成当前动画。默认是 false。

因此，默认地，stop() 会清除在被选元素上指定的当前动画。

例如:



Document


hello,world

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque, 　　　　　　　ipsa doloribus earum quasi qui dolorum maiores pariatur, quibusdam quidem, 　　　　　　　consequuntur a soluta deserunt fugit placeat nulla modi, maxime neque tempora. 

</div>


（未完待续…）

手机扫一扫

移动阅读更方便

阿里云服务器
腾讯云服务器
七牛云服务器

你可能感兴趣的文章

前端八股文everybody准备好了没
html5文件上传断点续传
html简单随机抽奖页面（在线抽奖、随机选取、自动挑选）

4

通过rem自适应屏幕尺寸

5

learnByWork

6

jquery 常用选择器和方法以及遍历（超详细）

7

Day05_vue入门

8

图片放大缩小的zoom.js

9

javascript 最权威的知识点总结

10

HTML轮播（3）