欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

jQuery效果---隐藏/显示,淡入/淡出,滑动,动画

程序员文章站 2022-05-02 20:49:58
...

jQuery效果—隐藏/显示,淡入/淡出,滑动,动画

方法 描述
animate() 对被选元素应用"自定义"的动画
clearQueue() 对被选元素移除所有排队函数(仍未运行的)
delay() 对被选元素的所有排队函数(仍未运行)设置延迟
dequeue() 移除下一个排队函数,然后执行函数
fadeIn() 逐渐改变被选元素的不透明度,从隐藏到可见
fadeOut() 逐渐改变被选元素的不透明度,从可见到隐藏
fadeTo() 把被选元素逐渐改变至给定的不透明度
fadeToggle() 在 fadeIn() 和 fadeOut() 方法之间进行切换
finish() 对被选元素停止、移除并完成所有排队动画
hide() 隐藏被选元素
queue() 显示被选元素的排队函数
show() 显示被选元素
slideDown() 通过调整高度来滑动显示被选元素
slideToggle() slideUp() 和 slideDown() 方法之间的切换
slideUp() 通过调整高度来滑动隐藏被选元素
stop() 停止被选元素上当前正在运行的动画
toggle() hide() 和 show() 方法之间的切换

(一)隐藏和显示

hide():隐藏
$("#hide").click(function(){
    $("p").hide();
  });
show():显示
 $("#show").click(function(){
    $("p").show();
  });
show()和hide()括号中可选的参数:规定隐藏/显示的速度,可以取以下值:"slow"、"fast" 或毫秒。
可添加函数:隐藏或显示完成后所执行的函数名称。
$(function(){
  $(".btn").click(function(){
    $("div").hide(1000,"linear",function(){
      alert("div已消失");
    });
  });
});
toggle():隐藏和切换自动切换
$("button").click(function(){
    $("p").toggle();
  });

(二)淡入/淡出

fadeIn():淡入
$(function(){
  $("button").click(function(){
    $("#div1").fadeIn();
    $("#div2").fadeIn("slow");
    $("#div3").fadeIn(3000);
  });
});
fadeOut():淡出
$(function(){
  $("button").click(function(){
    $("#div1").fadeOut();
    $("#div2").fadeOut("slow");
    $("#div3").fadeOut(3000);
  });
});
fadeToggle():淡入淡出切换
$(document).ready(function(){
	$("button").click(function(){
		$("#div1").fadeToggle();
		$("#div2").fadeToggle("slow");
		$("#div3").fadeToggle(3000);
	});
});
fadeTo():渐变为给定的不透明度
$(function(){
  $("button").click(function(){
    $("#div1").fadeTo("slow",0.15);
    $("#div2").fadeTo("slow",0.4);
    $("#div3").fadeTo("slow",0.7);
  });
});

注意:fadeTo() 没有默认参数,必须加上 slow/fast/Time

(三)滑动

slideDown():向下滑动
$(function(){
  $("#flip").click(function(){
    $("#panel").slideDown("slow");
  });
});
slideUp():向上滑动
$(function(){
  $("#flip").click(function(){
    $("#panel").slideUp("slow");
  });
});
slideToggle():切换向上向下滑动
$(document).ready(function(){
  $("#flip").click(function(){
    $("#panel").slideToggle("slow");
  });
});

(四)动画-animate()

操作单个属性
$(function(){
  $("button").click(function(){
    $("div").animate({left:'250px'});
  });
});
操作多个属性
$(function(){
  $("button").click(function(){
    $("div").animate({
      left:'250px',
      opacity:'0.5',
      height:'150px',
      width:'150px'
    });
  });
});
相对于当前值变化
$(function(){
  $("button").click(function(){
    $("div").animate({
      left:'250px',
      height:'+=150px',
      width:'+=150px'
    });
  });
});
使用队列:先执行完一个样式,接着再执行一个样式
$(function(){
  $("button").click(function(){
   $("div").animate({height:'300px',opacity:'0.4'},"slow")
.animate({width:'300px',opacity:'0.8'},"slow")
.animate({height:'100px',opacity:'0.4'},"slow")
.animate({width:'100px',opacity:'0.8'},"slow")
  });
});
delay()–延迟动画

执行完一个动画后,延迟多久再执行下一个

 $("#div1").click(function(){
                $(this)
                    .animate({width: 200}, 2000)
                    .delay(4000)
                    .animate({height: 200}, 2000)
                    .animate({opacity: 0.5}, 2000);
            });
stop()–停止动画

在stop()中设置参数为true,是停止所有的动画

$(function(){
  $("#flip").click(function(){
    $("#panel").slideDown(5000);
  });
  $("#stop").click(function(){
    $("#panel").stop();
  });
});
在上述效果中有没有回调函数的区别

如以下的实例中,有回调函数时,会再隐藏效果完成后再弹出警告框

$("button").click(function(){
  $("p").hide("slow",function(){
    alert("段落现在被隐藏了");
  });
});

如以下的实例中,没有回调函数时,警告框会在隐藏效果完成前弹出

$("button").click(function(){
  $("p").hide(1000);
  alert("段落现在被隐藏了");
});