Hey, ich habe folgendes Problem, ich habe 5 Kategorien auf der Hauptseite, jede Kategorie nimmt 20% der Breite des Monitors ein, also 5 Spalten nebeneinander, hier ist ein Bild :
Sobald auf eine Kategorie gedrückt wird, fahren alle Kategorien nacht rechts aus dem Bild und die angeklickte Kategorie fährt von Rechts wieder nach Links ins Bild und vergrößert sich auf die 100% width.
Soweit funktioniert dies auch alles, jedoch habe ich das Problem, dass wenn ich das erste mal auf eine Kategorie drücke, die Animation laggt, nachdem 2x anklicken, laggt die Animation nicht mehr, bzw fast garnicht mehr, das es auffällig wäre.
Hier ist der Code :
Hier wird die Methode aufgerufen :
Dieser Aufruf, ist fast Identisch mit Kategorie 2, 3,4 und 5.
Mir ist klar, das man es eleganter lösen könnte, jedoch wollte ich erstmal nur das es funktioniert.
Ich hoffe, der Code ausschnitt reicht um das Problem zu diagnostiezieren. Ich würde mich schonmal im Voraus für die Hilfe bedanken, bzw die Tipps um den Animationen vorzubeugen.
Sobald auf eine Kategorie gedrückt wird, fahren alle Kategorien nacht rechts aus dem Bild und die angeklickte Kategorie fährt von Rechts wieder nach Links ins Bild und vergrößert sich auf die 100% width.
Soweit funktioniert dies auch alles, jedoch habe ich das Problem, dass wenn ich das erste mal auf eine Kategorie drücke, die Animation laggt, nachdem 2x anklicken, laggt die Animation nicht mehr, bzw fast garnicht mehr, das es auffällig wäre.
Hier ist der Code :
Code:
function slideandHide(value, nichtHiden){
var left = $("#kategorien").css("width");
$("#" + value).css({"left": 0}).animate({"left":left},400,false, function()
{
if(value == nichtHiden)
{
$("#"+nichtHiden).css({"max-width":($("#"+nichtHiden).css("width"))}).animate({"max-width":left}, 400, false);
if(nichtHiden =="kategorie5")
{
$("#InhaltKategorie5").css("display","block");
}
}
});
if(value != nichtHiden || nichtHiden == "undefined")
{
$("#"+ value).hide(0);
}
}Hier wird die Methode aufgerufen :
Code:
case "#kategorie1":
slideandHide("kategorie1","kategorie1");
slideandHide("kategorie2");
slideandHide("kategorie3");
slideandHide("kategorie4");
slideandHide("kategorie5");
$("#kategorie1").css({"left":($("#kategorie1").css("left"))}).animate({"left":0},400,false, function()
{
$("#picKategorie1").hide();
});
$(".kategorieBild").hide();
break;Dieser Aufruf, ist fast Identisch mit Kategorie 2, 3,4 und 5.
Mir ist klar, das man es eleganter lösen könnte, jedoch wollte ich erstmal nur das es funktioniert.
Ich hoffe, der Code ausschnitt reicht um das Problem zu diagnostiezieren. Ich würde mich schonmal im Voraus für die Hilfe bedanken, bzw die Tipps um den Animationen vorzubeugen.
