消失效果(Sample Heading)範例 <!-- CSS --> <style type="text/css"> body { margin: 10px auto; width: 470px; } h3 { margin: 0; padding: 0 0 .3em; } p { margin: 0; padding: 0 0 .5em; } .pane { background: #edf5e1; padding: 10px 20px 10px; position: relative; border-top: solid 2px #c4df9b; } .pane .delete { position: absolute; top: 10px; right: 10px; cursor: pointer; } </style> <!-- Body --> <div class="pane"> <h3>Sample heading 1</h3> <p>內容</p> <img src="/public/images/jquery/btn-delete.gif" alt="delete" class="delete" /> </div> <div class="pane"> <h3>Sample heading 2</h3> <p>內容</p> <img src="/public/images/jquery/btn-delete.gif" alt="delete" class="delete" /> </div> <div class="pane"> <h3>Sample heading 3</h3> <p>內容</p> <img src="/public/images/jquery/btn-delete.gif" alt="delete" class="delete" /> </div> <div class="pane"> <h3>Sample heading 4</h3> <p>內容</p> <img src="/public/images/jquery/btn-delete.gif" alt="delete" class="delete" /> </div> <div class="pane"> <h3>Sample heading 5</h3> <p>內容</p> <img src="/public/images/jquery/btn-delete.gif" alt="delete" class="delete" /> </div> <!-- Javascript --> <script type="text/javascript"> $(document).ready(function(){ $(".pane .delete").click(function(){ $(this).parents(".pane").animate({ opacity: 'hide' }, "slow"); }); }); </script>
語法解說 .animate() 選擇"正在進行效果的元素"。 opacity:"hide" 設置透明效果,來達到隱藏功能。 |