^^^^^^^^^^^^^^^^^^^^
一、隐藏 显示
^^^^^^^^^^^^^^^^^^^^
$(selector).hide(speed,callback) //隐藏
$(selector).show(speed,callback) // 显示
speed 参数有:slow fast normal milliseconds
callback :更多的方法或功能
例子:
$(function(){
$("button").click(function(){
$("p").hide(1000,function(){
$("p").show(1000);
})
})
})
^^^^^^^^^^^^^^^^^^^^^^^
切换与滑动
^^^^^^^^^^^^^^^^^^^^^^^
$(select).toggle(speed,callback); //切换功能
toggle() 函数使用 show() 或 hide() 函数来切换 HTML 元素,同一个按钮可以点击
两次,实现隐藏和显示的效果,其实某些特定用途可以代替他们
$(selector).slideDown(speed,callback); // 向下滑动 并显示遮挡
$(selector).slideUp(speed,callback);// 向上滑动 ,并隐藏遮挡
$(selector).slideToggle(speed,callback);// 上下滑动 ,实现切换
js代码
<script type="text/javascript">
$(document).ready(function(){
$(".flip").click(function(){
$(".panel").slideToggle("slow");
});
});
</script>
html 代码
<div class="panel">
<p>PHP100视频教程 jquery课程效果</p>
<p>具体代码来源于w3c参考代码</p>
</div>
<p class="flip">点下试试</p>
^^^^^^^^^^^^^^^^^^^^^^^
切换与滑动
^^^^^^^^^^^^^^^^^^^^^^^
$(selector). fadeOut(speed,callback) //变淡至空
$(selector). fadeIn(speed,callback) //变亮至全部
$(selector). fadeTo(speed,opacity,callback) //变淡至指定效果 opacity亮度直用0.0 ~ 1.0之间
$(selector).animate({params},duration,easing,callback) //动画
params: 变化后的CSS效果,如:{height:300}
duration:变化速度用毫秒
easing:变化效果的名称(需要插件)
转载于:https://blog.51cto.com/dabiange/954525