JQ动画效果

最新推荐文章于 2022-09-21 19:08:34 发布

Mrqin-shen

最新推荐文章于 2022-09-21 19:08:34 发布

阅读量245

点赞数

文章标签： jquery

本文链接：https://blog.csdn.net/qinshensx/article/details/104153252

版权

JQ动画效果

显示 / 隐藏

方法1：
使用 -1 或 1 来控制元素的显示隐藏


	var flag= 1;
    $(".btn:first").click(function () {
		flag *= -1;
        if(flag == "-1"){
           // 目标.hide()  让目标隐藏（修改的display属性）
           // 小括号中，可是设置动画执行的时间
           $(".box").hide('slow');
        }else{
           // 目标.show()  让目标显示
           // 小括号中，可以设置动画执行的时间
           $(".box").show(5000);
        }
	})

方法2：
使用 toggle 来控制元素的显示隐藏

	
	$("#taggle").click(function () {
		//目标.toggle()
		// 会先进行目标的属性，如果是显示，就设置为隐藏
		//                     如果是隐藏，就设置为显示
           $(".box").toggle(2000);
	});

淡入 / 淡出

淡入

	$(".btn:eq(1)").click(function () {
        $(".box").fadeIn(2000); // 动画执行时间
    })

淡出

   $(".btn:eq(2)").click(function () {
       $(".box").fadeOut(2000); // 动画执行时间
   })

淡入 /淡出

   $(".btn:eq(3)").click(function () {
       $(".box").fadeToggle(2000); // 动画执行时间
   })

滑入 / 滑出

滑入

   $(".btn:eq(5)").click(function () {
       $(".box").slideDown(2000); // 动画执行时间
   });

滑出

	$(".btn:eq(6)").click(function () {
		$(".box").slideUp(2000); // 动画执行时间
	});

滑入 / 滑出

	$(".btn:eq(7)").click(function () {
		$(".box").slideToggle(2000); // 动画执行时间
	});

渐变到指定的透明度

   $(".btn:eq(4)").click(function () {
       //参数1 ： 执行的时间
       //参数2 :  指定的透明度
       $(".box").fadeTo(2000,0.3);
   })

animate动画（自定义动画）

animate() 方法执行 CSS 属性集的自定义动画。

该方法通过CSS样式将元素从一个状态改变为另一个状态。CSS属性值是逐渐改变的，这样就可以创建动画效果。

只有数字值可创建动画（比如 “margin:30px”）。字符串值无法创建动画（比如 “background-color:red”）。

目标.animate({参数1}，参数2，参数3)

参数1
对象{ }，一系列要实现的样式
参数2
时间，单位毫秒
参数3
函数function（）{
参数1，实现后要执行的功能
}

	// 例
	$(".text:first").animate({
		opacity: 1,
		fontSize: "40px"
	},1000,function(){
		$(this).animate({ fontSize: "30px" },800,function(){
			$(this).addClass("cc");
		})