jQuery in $('tr').slideDown() · Internet Mojster

6611523261156

15. sep 2009 ob 15:56

Se je kdo od vas že igral z animacijo vrstic v tabeli z jQuery?

Problem je v tem, da jQueryjev engine ob uporabi slideDown() animacije določi na TR elementu stil "display:block", ki pa seveda iz očitnih razlogov razsuje layout.

Googlanje mi ne pomaga, naletim le neskončnokrat na ta isti problem, brez kakšne pametne rešitve, ki ne bi pokvarila validnosti kode.

Je že kdo od vas pogruntal kakšen hack ali workaround, ki bi učinkovito in elegantno rešil ta problem?

2975

programiranje jquery

Vini

6611523261156

17. sep 2009 ob 15:43

Nope, animate() ne pomaga, očitno tudi on nastavi "display:block" :) Kot vse kaže, bo potrebno zadeve rahlo shekati :)

b00mbar

35055412718

17. sep 2009 ob 15:48

še neki. kaj če vse iste fore probaš izvest na TDjih znotraj tega TRja? načeloma se ne bi smeli razsut, če jim daš display:block...

Vini

6611523261156

17. sep 2009 ob 16:21

Zelo načelno se sesujejo, seveda, poskusi :)

carli

12585835417

17. sep 2009 ob 20:54

Vini kaj pa line-height?

Namreč če rowu nastaviš line-height:0px; je ta načeloma hidden, ne vem a to dela normalo tudi v IE. Potem pa animiraš line-height vrednost. Sam sem testiral tak noob primer:

var inter;

function slideDownRow(rheight) {
    var inter = setInterval("changeHeight('"+rheight+"', '1');", 10);
}
function changeHeight(h, id) {
    var naw = $('#'+id).css('line-height').replace('px', '');
    naw++;
    if (naw < h) {
        $('#'+id).css({'line-height': ''+naw+'px'});
    }
    else {
        clearInterval(inter);
    }
}

No je že skor slide :D

FrEaKmAn

30317559

18. sep 2009 ob 14:57

Vini, bi nam lahko pastu ta tvoj html?

1

Vini

6611523261156

18. sep 2009 ob 16:36

FrEaKmAn, seveda, z lahkoto :) Sem pripravil enostaven demo, ki zelo očitno nakaže problem:

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <title>Lorem ipsum</title>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
  <script type="text/javascript">
  var foo = function() {
    var e = $('<tr><td>added</td><td>content</td></tr>').hide();
    $('table > tbody').append(e);
    e.slideDown('slow');
  };
  </script>
  <style type="text/css">td {background-color: silver;}</style>
</head>
<body>
  <table>
    <tbody>
      <tr>
        <td>hello</td><td>world</td>
      </tr>
      <tr>
        <td>lorem</td><td>ipsum</td>
      </tr>
    </tbody>
  </table>
  <a href="#" onclick="foo();return false;">click</a>
</body>
</html>