Display:none - bei animate() wird nicht angenommen

**Stefan** · 09.09.2009 11:25

Hallo,

Ich möchte einen ähnlichen Effekt wie bei show() erstellen, jedoch soll nur die Höhe verändert werden, bis zum Punkt 0 und anschließend soll die ganze Ebene ausgeblendet werden. Eigentlich ein Kindespiel, aber Display: none wird nicht angenommen? Bei Google fand ich auf die schnelle auch keine Lösung

Danke scho mal für die Antworten,
Gruß Stefan

HTML-Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
  
  <script>
  $(document).ready(function(){
    
    // Using multiple unit types within one animation.
    $("#go").click(function(){
      $("#block").animate({ 
        height: "0px",
        borderWidth: "0px",      
        display: "none"
      }, 1500 );
     
    });

  });
  </script>
  <style>
  div { 
    background-color:#bca; 
    width:100px; 
    border:1px solid green;
  }
  </style>
</head>
<body>
  <button id="go">» Run</button>
  <div id="block">Hello!</div>
</body>
</html>

Ist schon logisch, weil man display: none ja nicht "animieren" kann ... wie löse ich das Problem am geschicktesten? Ich kann ja noch ein weiteres Event einbauen, aber wie schaff ich es, dass es erst nach dem ersten Event aufgerufen wird bzw. um X Sekunden verzögert?

**Stefan** · 09.09.2009 11:48

Okay, hab's gelöst

HTML-Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
  
  <script>
  $(document).ready(function(){
    
    // Using multiple unit types within one animation.
    $("#go").click(function(){
      $("#block").animate({ 
        height: "0px"

      }, 1000, '', function() {
  var cssObj = {
        'display' : 'none'
      }
      $("#block").css(cssObj);
      });
    });
  });
  
  </script>
  <style>
  div { 
    background-color:#bca; 
    width:100px; 
    border:0px solid green;
  }
  </style>
</head>
<body>
  <button id="go">» Run</button>
  <div id="block">Hello!</div>
</body>
</html>

**the0bone** · 09.09.2009 12:00

Auch schicke Lösung!
Ich habs fast genauso http://yourhp.de/demo/0908-andre-morre.de/

zur Startseite vom TP

Thema: Display:none - bei animate() wird nicht angenommen

LinkBack

Themen-Optionen

Thema durchsuchen

Thema bewerten

Display:none - bei animate() wird nicht angenommen

Ähnliche Themen

animate funzt in Safari und Chrome nicht

Neuinstallation DW - Seriennummer wird nicht angenommen

Providerwechsel, jedoch wird ACK nicht angenommen

Hover wird nicht angenommen

oft. wird von Wind. 98 nicht angenommen

Aktive Benutzer

Aktive Benutzer