5.fadeIn() fadeOut() fadeToggle() fadeTo()
fadeIn():用于淡入已隐藏的元素。
fadeOut( ) :方法用于淡出可见元素。
fadeToggle( ) :方法可以在 fadeIn() 与 fadeOut() 方法之间进行切换。
如果元素已淡出,则 fadeToggle() 会向元素添加淡入效果。
如果元素已淡入,则 fadeToggle() 会向元素添加淡出效果。
fadeTo( ) :方法允许渐变为给定的不透明度(值介于 0 与 1 之间)。
重点:在搞这几个方法时,我想到了另一对方法hide()show()。hide隐藏起来的内容能否被“淡入”,被“淡出”的内容能否被“淡入”。为了方便,我拿fadeToggle方法和show,hide进行试验。发现,他们之间能相互作用!这个发现让我有点小兴奋,附上试验代码:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script type="text/javascript" src="jquery-2.2.1.min.js"></script> <script type="text/javascript"> $(function() { $(".btn1").click(function() { $(".test").hide("slow"); }); $(".btn2").click(function(){ $(".test").fadeToggle("slow"); }); $(".btn3").click(function(){ $(".test").show("slow"); }) }); </script> </head> <body> <h2 class="test">This is a heading</h2> <p class="test">This is a para</p> <p>This is another</p> <button type="button" class="btn1">Click me to hide</button> <button type="button" class="btn3">Click me to show</button> <button type="button" class="btn2">fadeToggle </button> </body> </html>
时间: 2024-11-10 14:02:11