Jquery實現由下向上展開的效果


清遠大學城網(http://www.qydxc.com)
常見的做向下展開的效果很簡單,直接用slideUp跟slideDown就行。如果要展開的div是通過position:absolute絕對定位的,且通過相對與底部定位,如bottom:0px 這個時候調用slideDown就是向上展開的。 (因為slideDown說白了就是動態改變元素高度,底部定位固定,高度變高的時候就向上擴展了) 代碼如下 復制代碼 //精品推薦 $('.remm_product ul li').hover( function(){ $(this).find('.p_info').slideDown(); }, function(){ $(this).find('.p_info').slideUp(); } ) jquery slidetoggle也可以實現內容緩慢展開和收起的操作。 代碼如下 復制代碼 <html> <head> <script type="text/javascript" src="/jquery/jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ $(".flip").click(function(){ $(".panel").slideToggle("slow"); }); }); </script> <style type="text/css"> div.panel,p.flip { margin:0px; padding:5px; text-align:center; background:#e5eecc; border:solid 1px #c3c3c3; } div.panel { height:120px; display:none; } </style> </head> <body> <div class="panel"> <p>Eiege.com</p> <p>jquery專欄,學習和交流。Eiege專欄</p> </div> <p class="flip">請點擊這里</p> </body> </html> jQuery 擁有以下滑動函數: $(selector).slideDown(speed,callback):把內容從上向下展開 $(selector).slideUp(speed,callback):把內容從下向上收起 $(selector).slideToggle(speed,callback):內容上下方向的收起和展開 speed 參數可以設置這些值:"slow", "fast", "normal" 或毫秒。

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM