jQuery 效果(事件函数)

最新推荐文章于 2021-12-10 13:34:17 发布

paul0926

最新推荐文章于 2021-12-10 13:34:17 发布

阅读量199

点赞数

分类专栏： html 文章标签： jQuery

本文链接：https://blog.csdn.net/paul0926/article/details/90442864

版权

html 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

jQuery 事件函数

隐藏显示动画等

隐藏、显示、切换、滑动以及动画。WOW!
Click Here to Show/Hide Panel
实例
jQuery hide()
演示简单的 jQuery hide() 函数。
jQuery hide()
另一个 hide() 演示。如何隐藏部分文本。
jQuery slideToggle()
演示简单的 slide panel 效果。
jQuery fadeTo()
演示简单的 jQuery fadeTo() 函数。
jQuery animate()
演示简单的 jQuery animate() 函数。

jQuery 隐藏和显示
通过 hide() 和 show() 两个函数，jQuery 支持对 HTML 元素的隐藏和显示：
实例

$("#hide").click(function(){

$("p").hide();

});

$("#show").click(function(){

$("p").show();

});

hide() 和 show() 都可以设置两个可选参数：speed 和 callback。

语法：
$(selector).hide(speed,callback)
$(selector).show(speed,callback)

callback 参数是在 hide 或 show 函数完成之后被执行的函数名称。您将在本教程下面的章节学习更多有关 callback 参数的知识。

speed 参数可以设置这些值：“slow”, “fast”, “normal” 或 milliseconds：

实例

$("button").click(function(){

$("p").hide(1000);

});

jQuery 切换、滑动函数

jQuery toggle() 函数使用 show() 或 hide() 函数来切换 HTML 元素的可见状态。

隐藏显示的元素，显示隐藏的元素。

语法：
$(selector).toggle(speed,callback)
speed 参数可以设置这些值：“slow”, “fast”, “normal” 或毫秒。

实例

$("button").click(function(){

$("p").toggle();

});

callback 参数是在 hide 或 show 函数完成之后被执行的函数名称。您将在本教程下面的章节学习更多有关 callback 参数的知识。

jQuery 滑动函数 - slideDown, slideUp, slideToggle
jQuery 拥有以下滑动函数：

$(selector).slideDown(speed,callback)
$(selector).slideUp(speed,callback)
$(selector).slideToggle(speed,callback)

speed 参数可以设置这些值：“slow”, “fast”, “normal” 或毫秒。

callback 参数是在 hide 或 show 函数完成之后被执行的函数名称。您将在本教程下面的章节学习更多有关 callback 参数的知识。

slideDown() 实例

`$(".flip").click(function(){

$(".panel").slideDown();

});

slideUp() 实例

$(".flip").click(function(){

$(".panel").slideUp()

})

slideToggle() 实例

$(".flip").click(function(){

$(".panel").slideToggle();

});

jQuery Fade 函数 - fadeIn(), fadeOut(), fadeTo()
jQuery 拥有以下 fade 函数：

$(selector).fadeIn(speed,callback)
$(selector).fadeOut(speed,callback)
$(selector).fadeTo(speed,opacity,callback)

speed 参数可以设置这些值：“slow”, “fast”, “normal” 或毫秒。

fadeTo() 函数中的 opacity 参数规定减弱到给定的不透明度。

callback 参数是在 hide 或 show 函数完成之后被执行的函数名称。您将在本教程下面的章节学习更多有关 callback 参数的知识。

fadeTo() 实例

$("button").click(function(){

$("div").fadeTo("slow",0.25);

});

fadeOut() 实例

$("button").click(function(){

$("div").fadeOut(4000);

});

jQuery 自定义动画

jQuery 函数创建自定义动画的语法：

$(selector).animate({params},[duration],[easing],[callback])
关键的参数是 params。它定义了产生动画的属性。可以同时设置多个此类属性：
animate({width:“70%”,opacity:0.4,marginLeft:“0.6in”,fontSize:“3em”});
第二个参数是 duration。它定义用来应用于动画的时间。它设置的值是：“slow”, “fast”, “normal” 或毫秒。
第三个参数是运动曲线，
第四个参数是回调函数
实例 1

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jq控制类名</title>
    <style type="text/css">
        .new1{
            /*position: relative;*/
            width: 100px;
            height: 100px;
            background: pink;
        }

    </style>
    <script src="../20190522/jquery-1.12.4.min.js"></script>
    <script>
        $(document).ready(function () {
            // animate四个属性，第一个是设置效果
            // 第二个是完成时间，第三个是运动曲线
            // 第四个是回调函数
            $('.btn').click(function () {
                $('div').animate({'width':'500px','height':'500px','opacity':'0.5','left':'200px','margin-top':'200px'},'slow','linear',function () {
//                alert('ok');
                $(this).css('background','green');
            });

            })

        })
    </script>

</head>
<body>
    <div class="new1" id="box1">asdasadasd
    </div>
    <button class="btn">动画</button>
</body>
</html>