jQuery <tr> ein- und ausblenden Explorer/Firefox

Status
Nicht offen für weitere Antworten.
Ich hatte ursprünglich nicht den korrekten Pfad zur DTD in dem Beispiel. Das hatte ich aber korrigiert. Trotzdem klappt es mit den Spalten nicht. :confused:

@Sven

Welche Header hast Du gesendet bzw. würdest Du da einbauen?
 
Zuletzt bearbeitet:
Danke, damit geht es in unserem Beispiel hier. Leider klappt das nicht in meiner eigentlichen Anwendung.

Ich fürchte, auf das schicke fadeIn werde ich wohl in absehbarer Zeit verzichten müssen (vielleicht gehts ja mit einem der nächsten jQuery Updates).

Meine Lösung wird bis dahin css("display","table-row") heißen.

Vielen Dank für Eure Unterstützung!
 
Hi,

schmeiss nicht gleich die Flinte ins Korn. jQuery bietet ja noch die Methode animate. Damit funktioniert es bei mir auch im IE 8.
Code:
$(document).ready(function() {
  $("input#meineCheckbox").click(function(){
    if($(this).is(":checked"))
      $("tr.ausgeblendeteZeile td").animate({opacity: 1}, 1000);
    else
      $("tr.ausgeblendeteZeile td").animate({opacity: 0}, 1000);
  });
});

$(function(){
  $("tr.ausgeblendeteZeile td").css({opacity: 0});
});

Die Eigenschaft display: none habe ich im Gegenzug aus der CSS-Klasse genommen.

Ciao
Quaese
 
Naja, aber ohne display:none lässt er im IE dort wo vorher die Zeilen waren einfach eine leere Box zurück d.h. die Tabelle wird nicht verkürzt.

Das hier würde gehen:

Code:
$(document).ready(function() {
  $("input#meineCheckbox").click(function(){
    if($(this).is(":checked"))
      $("tr.ausgeblendeteZeile td").css("display","table-row");
      $("tr.ausgeblendeteZeile td").animate({opacity: 1}, 1000);
    else
      $("tr.ausgeblendeteZeile td").animate({opacity: 0}, "slow",function(){$("tr.ausgeblendeteZeile td").css("display","none");});
  });
});

Leider werden dabei diesmal im Firefox beim Einblenden nicht mehr die korrekten Spaltenabstände angezeigt.

Wie man es dreht und wendet... :mad:
 
Hi,

versuchs mal so:
Code:
$(document).ready(function() {
  $("input#meineCheckbox").click(function(){
    if($(this).is(":checked")){
      $("tr.ausgeblendeteZeile td").css("display", "");
      $("tr.ausgeblendeteZeile td").animate({opacity: 1}, 1000);
    }else{
      $("tr.ausgeblendeteZeile td").animate({opacity: 0}, 1000, function(){
        $("tr.ausgeblendeteZeile td").css("display","none");
      });
    }
  });
});

$(function(){
  $("tr.ausgeblendeteZeile td").css({display: 'none', opacity: 0});
});

Ciao
Quaese
 
Das funktioniert! Danke!

In Deinem Beispiel war nur noch ein kleiner Codeschnipsel, der entfernt werden musste:

Code:
$(document).ready(function() {
  $("input#meineCheckbox").click(function(){
    if($(this).is(":checked")){
      $("tr.ausgeblendeteZeile td").css("display", "");
      $("tr.ausgeblendeteZeile td").animate({opacity: 1}, 1000);
    }else{
      $("tr.ausgeblendeteZeile td").animate({opacity: 0}, 1000, function(){
        $("tr.ausgeblendeteZeile td").css("display","none");
      });
    }
  });
});

$(function(){
  $("tr.ausgeblendeteZeile td").css({display: 'none', opacity: 0});
});

Super Forum hier!
 
Status
Nicht offen für weitere Antworten.
Zurück