JQuery特效与动画总结

Posted 2020-09-18

几种特效

一、显示与隐藏show、hide

js写法:

docment.getElementById("p1").style.display="block";

document.getElementById("p1").style.display="none";

JQuery显示与隐藏的方法：

$("#p1").css("dislay":"block");  转化成模块元素显示

$("#p1").css("display":none); 

   eq:

  $(function () {
            var $link = $(".artList a");
            var $hide = $(".artList :eq(2)");  //获取需要显示的文本
            $link.click(function () {
                if ($(this).html() == "显示") {
                    $(this).html("隐藏");
                    $hide.show(5000);
                }
                else {
                    $(this).html("显示");
                    $hide.hide(5000);
                }
            })
        })

  $("a").click(function(){ 
      $("img").show(3000,function(){ 
          $(this).css("border","solid 1px #ccc ");
      })
   })
   $("img").click(function(){ 
      $(this).hide(3000);
   })

   <a href="javascript:void(0)">显示</a>
    <img src="images/001.jpg"/>

二、toggle()方法

该方法优点是自动切换显示状态(不需要检测当前的显示状态)

有三种调用格式：

toggle();

toggle(switch);  根据逻辑参数调用，switch当为true时显示元素,当为false时隐藏元素

toggle(speed,[callback]) 

 $("#Button1").click(function () {
                $("img").toggle();
            })
            $("input:eq(1)").click(function () {
                var intI = 0;
                var blnA = intI > 1;
                $("img").toggle(blnA);
            })
            $("#Button3").click(function () {
                $("img").toggle(3000, function () {
                    $(this).css({ "border":"solid 1px #ccc","padding":"2px" });
                })
            })