您的位置: 首页  >  IT文章  >  jQuery动画

jQuery动画

分类: IT文章 • 2023-11-17 08:05:42

jQuery动画

show()和hide()—隐藏显示

 //show()和hide() hide()首先记住display的值，在将display设置为None
        $(function () {
            $("#panel h5.head").toggle(function () {
                $(this).next("div.content").hide(600);
            }, function () {
                $(this).next("div.content").show(600);
            });
        });
View Code

fadeOut（）和fadeIn（）—通过不透明度隐藏或显示

  //fadeOut() 降低元素的不透明度
        //fadeIn() 与fadeOut()相反
        $(function () {
            $("#panel h5.head").mousemove(function () {
                $(this).next("div.content").fadeOut();
            }).mouseout(function () {
                $(this).next("div.content").fadeIn();
            });
        })
View Code

slideDown（）和slideUp（）—改变元素高度，向下延深，向上收缩

 //slideDown() 改变元素高度 元素由上至下延伸显示
        //slideUp() 由下到上收缩
        $(function () {
            $("#panel h5.head").toggle(function () {
                $(this).next("div.content").slideUp();
            }, function () {
                $(this).next("div.content").slideDown();
            });
        });
View Code

animate()自定义动画

 $(function () {
            $("#panel1").css("opacity", "0.5"); //设置不透明度
            $("#panel1").click(function () {
                $(this).animate({ left: "500px" }, 3000);  //以3秒的速度移动
                $(this).animate({ left: "+=500px" }, 3000);  //以3秒的速度累加移动
                $(this).animate({ left: "-=500px" }, 3000);  //以3秒的速度累减移动

                //多种效果动画，改变样式映射
                $(this).animate({ left: "500px", height: "200px" }, 3000); //向右下方移动同步移动

                //多种效果可以有序的执行
                $(this).animate({ left: "500px" }, 3000);
                $(this).animate({ height: "200px" }, 3000);
                //可改为链式：
                                $(this).animate({ left: "500px" }, 3000)
                                    .animate({ height: "200px" }, 2000);

                //综合动画
                $(this).animate({ left: "400px", height: "200px", opacity: "1" }, 3000)
                    .animate({ top: "200px",  "200px" }, 3000, function () {
                        $(this).css("border", "5px solid blue");
                    })
                    .fadeOut("slow");
                })
            })
View Code

stop()停止当前动画,执行下一个动画

 //stop()停止当前动画,执行下一个动画
            //stop(clearQueue,gotoEnd);clearQueue:清除当前执行的队列，gotoEnd：调至执行的动画结尾，两个参数均为Bool型，均可选
            $(function(){
                $("#panel").hover(function(){
                    $(this).stop()
                        .animate({height:"300px"},3000) //如果此时触发光标移除事件，将继续执行下面的代码，若不想执行下边的代码
                                                        //则stop需要参数stop(true);
                        .animate({width："200px"},2000);
                },function(){
                    $(this).stop()
                        .animate({height:"100"},2000);
                })

            })
View Code

判断元素是否正在动画状态，若在，不在添加新的动画状态，避免动画积累

 //判断元素是否正在动画状态，若在，不在添加新的动画状态，避免动画积累
            if(!$("#panel").is(":animate")){  //判断是否处在动画状态上
            }
View Code

其他动画函数

   //其他动画
            toggle(speed,[callback]); //切换元素的可见状态
            slideToggle(speed,[callback]); //通过高度变化切换可见性
            fadeTo(speed,opacity,[callback]); //把元素的不透明度以渐变的方式调整到指定的值
View Code

相关推荐