效果学习(基本参数都可以写毫秒)
基本(没有透明效果)
show([s,[e],[fn]]) 显示隐藏的匹配元素。 display:none
hide([s,[e],[fn]]) 隐藏显示的元素
toggle([s],[e],[fn]) 在所有 <p> 元素上进行隐藏和显示之间的切换:
淡入淡出(类似于那种透明效果)
fadeIn([s],[e],[fn]) 淡入已隐藏的元素。 类似于show显示隐藏的匹配元素 display:none的css也可以用
fadeOut([s],[e],[fn]) 用于淡出可见元素 类似于hide隐藏显示的元素
fadeTo([[s],o,[e],[fn]]) 方法允许渐变为给定的不透明度(值介于 0 与 1 之间)。
fadeToggle([s,[e],[fn]]) 方法可以在 fadeIn() 与 fadeOut() 方法之间进行切换。
如果元素已淡出,则 fadeToggle() 会向元素添加淡入效果。
如果元素已淡入,则 fadeToggle() 会向元素添加淡出效果。
fadeIn
$("#message").html("<p>联系方式已成功提交!</p>")
.append("<p>Script design</p>")
.hide()
.fadeIn(1500, function() {
$('#message').append("<img id='checkmark' src='yes.ico' />");
});
fadeTo
$("button").click(function(){
$("#div1").fadeTo("slow",0.15);
$("#div2").fadeTo("slow",0.4);
$("#div3").fadeTo("slow",0.7);
});
fadeToggle() 方法
<script>
$(document).ready(function(){
$("button").click(function(){
$("#div1").fadeToggle();
$("#div2").fadeToggle("slow");
$("#div3").fadeToggle(3000);
});
});
</script>
<p>Demonstrate fadeToggle() with different speed parameters.</p>
<button>Click to fade in/out boxes</button>
<br><br>
<div id="div1" style="width:80px;height:80px;"></div>
<br>
<div id="div2" style="width:80px;height:80px;"></div>
<br>
<div id="div3" style="width:80px;height:80px;"></div>
jQuery 滑动方法
通过 jQuery,您可以在元素上创建滑动效果。
jQuery 拥有以下滑动方法:
- slideDown() 方法用于向下滑动元素
- slideUp() 方法用于向上滑动元素。
- slideToggle() 方法可以在 slideDown() 与 slideUp() 方法之间进行切换。
如果元素向下滑动,则 slideToggle() 可向上滑动它们。
如果元素向上滑动,则 slideToggle() 可向下滑动它们。
slideDown()
slideUp()
<script type="text/javascript">
$(document).ready(function(){
$(".btn1").click(function(){
$("p").slideUp();
});
$(".btn2").click(function(){
$("p").slideDown();
});
});
</script>
<p>This is a paragraph.</p>
<button class="btn1">Hide</button>
<button class="btn2">Show</button>
slideToggle()
<script type="text/javascript">
$(document).ready(function(){
$(".btn1").click(function(){
$("p").slideToggle();
});
});
</script>
<p>This is a paragraph.</p>
<button class="btn1">Toggle</button>