javascript - How to apply smooth show/hide effect with slideToggle on jQuery -
i trying show hide content slidetoggle , wokign not getting smooth animation effect on table.
i have tryied 2 code getting proper animation effect:
$('.more').slidetoggle('fast');$('.more').stop().slidetoggle(500);
any idea how that?
thanks.
here jquery code work:
$('#more').click(function () { $(this).text('see less'); if ($('.more').is(':visible')) { $(this).text('see more'); } else { $(this).text('see less'); } //$('.more').slidetoggle('fast'); $('.more').stop().slidetoggle(500); return false; });<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> <a href="#" id="more">more us</a> <table> <thead> <tr> <th>date</th> <th>address</th> <th>rooms</th> <th>sqm</th> <th>floor</th> <th>parking</th> <th class="price">price</th> <th>ppm</th> </tr> </thead> <tbody> <tr> <td data-name="date">5/12/14</td> <td data-name="address">alenby 50, tel aviv</td> <td data-name="rooms">1.5</td> <td data-name="sqm">32</td> <td data-name="floor">1</td> <td data-name="parking">1</td> <td data-name="price">1,410,000</td> <td data-name="ppm">40,286</td> </tr> <tr class="active"> <td data-name="date">13/05/14</td> <td data-name="address">alenby 50, tel aviv</td> <td data-name="rooms">1.5</td> <td data-name="sqm">32</td> <td data-name="floor">2</td> <td data-name="parking">1</td> <td data-name="price">13/05/14</td> <td data-name="ppm">44,000</td> </tr> <tr class="more"> <td data-name="date">18/08/14</td> <td data-name="address">alenby 50, tel aviv</td> <td data-name="rooms">1.5</td> <td data-name="sqm">32</td> <td data-name="floor">6</td> <td data-name="parking"> </td> <td data-name="price">1,600,000</td> <td data-name="ppm">45,714</td> </tr> <tr class="more"> <td data-name="date">14/09/14</td> <td data-name="address">alenby 50, tel aviv</td> <td data-name="rooms">1.5</td> <td data-name="sqm">32</td> <td data-name="floor">4</td> <td data-name="parking"> </td> <td data-name="price">1,375,000</td> <td data-name="ppm">39,286</td> </tr> <tr class="more"> <td data-name="date">25/01/14</td> <td data-name="address">alenby 50, tel aviv</td> <td data-name="rooms">1.5</td> <td data-name="sqm">32</td> <td data-name="floor">2</td> <td data-name="parking"> </td> <td data-name="price">1,680,000</td> <td data-name="ppm">28,966</td> </tr> </tbody> </table>
simply change this:
$('.more').stop().slidetoggle(10);// show effect faster use small value. $('#more').click(function () { $(this).text('see less'); if ($('.more').is(':visible')) { $(this).text('see more'); } else { $(this).text('see less'); } //$('.more').slidetoggle('fast'); $('.more').stop().slidetoggle(10); return false; });<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <a href="#" id="more">more us</a> <table> <thead> <tr> <th>date</th> <th>address</th> <th>rooms</th> <th>sqm</th> <th>floor</th> <th>parking</th> <th class="price">price</th> <th>ppm</th> </tr> </thead> <tbody> <tr> <td data-name="date">5/12/14</td> <td data-name="address">alenby 50, tel aviv</td> <td data-name="rooms">1.5</td> <td data-name="sqm">32</td> <td data-name="floor">1</td> <td data-name="parking">1</td> <td data-name="price">1,410,000</td> <td data-name="ppm">40,286</td> </tr> <tr class="active"> <td data-name="date">13/05/14</td> <td data-name="address">alenby 50, tel aviv</td> <td data-name="rooms">1.5</td> <td data-name="sqm">32</td> <td data-name="floor">2</td> <td data-name="parking">1</td> <td data-name="price">13/05/14</td> <td data-name="ppm">44,000</td> </tr> <tr class="more"> <td data-name="date">18/08/14</td> <td data-name="address">alenby 50, tel aviv</td> <td data-name="rooms">1.5</td> <td data-name="sqm">32</td> <td data-name="floor">6</td> <td data-name="parking"> </td> <td data-name="price">1,600,000</td> <td data-name="ppm">45,714</td> </tr> <tr class="more"> <td data-name="date">14/09/14</td> <td data-name="address">alenby 50, tel aviv</td> <td data-name="rooms">1.5</td> <td data-name="sqm">32</td> <td data-name="floor">4</td> <td data-name="parking"> </td> <td data-name="price">1,375,000</td> <td data-name="ppm">39,286</td> </tr> <tr class="more"> <td data-name="date">25/01/14</td> <td data-name="address">alenby 50, tel aviv</td> <td data-name="rooms">1.5</td> <td data-name="sqm">32</td> <td data-name="floor">2</td> <td data-name="parking"> </td> <td data-name="price">1,680,000</td> <td data-name="ppm">28,966</td> </tr> </tbody> </table>
Comments
Post a Comment