jQuery入门基础：动画和特效

Posted 2020-08-05

//显示和隐藏

hide()的语法形式：$(selector).hide(speed,callback);//speed:“fast”;"slow"；毫秒数————callback_在显示／隐藏之后的事件

show()的语法形式：$(selector).show(speed,callback);

$(function (){
    $("#hide").click(function(){
        $("div").hide(1000);
    })
    $("#show").click(function(){
        $("div").show(1000);
    })
});

//淡入和淡出

fadeIn()语法：$(selector).fadeIn(speed,callback);// 淡入隐藏的元素

fadeOut()语法：$(selector).fadeOut(speed,callback);// 淡出可见的元素

fadeToggle()的语法：$(selector).fadeToggle(speed,callback);// 在fadeIn()和fadeOut()之间切换

fadeTo()的语法：$(selector).fadeTo(speed,opacity,callback);// 允许渐变给定的不透明度,不透明度在0～1之间

$(function (){
    $("button").click(function(){
        $("#div1").fadeIn();
          $("#div2").fadeIn(1000);
          $("#div3").fadeIn("slow");
    });
})

$(function(){
    $("button").click(function(){
        $("#div1").fadeOut()
        $("#div2").fadeOut(1000);
          $("#div3").fadeOut("slow");
    })
})

$(function(){
    $("button").click(function(){
        $("#div1").fadeToggle()
        $("#div2").fadeToggle(1000);
          $("#div3").fadeToggle("slow");
    })
})


$(function(){
    $("button").click(function(){
        $("#div1").fadeTo("fast",015)
        $("#div2").fadeTo(1000,0.2);
          $("#div3").fadeTo("slow",0.5);
    })
})

//滑动效果

slideDown()语法：$(selector).slideDown(speed,callback);// slideDown()向下滑动元素

slideUp()语法：$(selector).slideUp(speed,callback);// slideUp()用于向上滑动元素

slideToggle()的语法：$(selector).slideToggle(speed,callback);// slideToggle()可以在 slideDown() 与 slideUp() 方法之间进行切换

$(function (){
    $("button").click(function(){
        $("#div1").slideDown("slow");
       })
    $("button").click(function(){
        $("#div2").slideUp("slow");
       })
    $("button").click(function(){
        $("#div2").slideToggle("slow");  
    })
});

//动画效果

语法：$(selector).animate({params},speed,callback);//params为必需的参数定义形成动画的CSS属性。speed和callback是可选参数，前者规定效果的时长，取值为："slow"、"fast"和毫秒；后者是动画完成后执行的函数名称。

$(function (){
    $("#btn").click(function(){
    $("div").animate({
        height:"200px",
          width:"660px"
    },"slow",function(){
    $("div").animate({
        height:"80px",
          width:"80px"
    },"slow" )  
    })
});
})

//停止效果

语法：$(selector).stop(stopAll,goToEnd); // stopAll和goToEnd 参数都是可选的。前者规定是否应该清除动画队列，默认是false，即仅停止活动的动画，允许任何排入队列的动画向后执行；后者规定是否立即完成当前动画，默认是false

$(function(){
    //jQuery代码
    $("#flip").click(function(){
    $("#panel").slideToggle(1000);
    });
      $("#stop").click(function(){
    $("#panel").stop();
    })
});