FAQ :: Mitgliederliste :: MGi Team

Willkommen auf dem Portal für Mediengestalter

Zur Registrierung

Thema: JavaScript toggle mit zwei verschiedenen Klassen vom 28.10.2011

	MGi Foren-Übersicht -> Programmierung -> JavaScript toggle mit zwei verschiedenen Klassen
	Seite: Zurück 1, 2

Autor

Nachricht

pantonine

Dabei seit: 03.03.2011
Ort: gehen Sie bitte weiter…
Alter: -
Geschlecht: -

Verfasst Fr 28.10.2011 17:34 Titel

User-Aktionen bubblen nach unten und die ausgelösten Events nach oben, bis sie einen passenden Eventhandler treffen. Du kannst also nur das Event-Handling enger fassen oder das Weiterbubbeln (doofes Wort) unterbinden.

Private Nachricht senden

elduderino
Threadersteller

Dabei seit: 09.10.2011
Ort: Augsburg
Alter: 36
Geschlecht: Männlich

Männlich

Verfasst Fr 28.10.2011 17:47
Titel

Antworten mit Zitat

Code:

$(".projects").toggle(
if($(".projects .textbox", this).click(function(event))==true){
   }
else{
   function() {
      $(this).animate({height: "140px"}, 500)
      $(" .textbox .text", this).animate({opacity: "1"}, 500)
            },

   function() {
      $(this).animate({height: "50px"}, 500)
      $(" .textbox .text", this).animate({opacity: "0"}, 500)
            }
   }
);

Private Nachricht senden

Anzeige

Anzeige

pantonine

Dabei seit: 03.03.2011
Ort: gehen Sie bitte weiter…
Alter: -
Geschlecht: -

Verfasst Fr 28.10.2011 17:55
Titel

Antworten mit Zitat

Zitat:

if($(".projects .textbox", this).click(function(event))==true){
}

So ein Statement macht keinen Sinn. click() ist auf die Angabe einer Callbackfunktion konzipiert. Und ein Nicht-Klick-Event macht überhaupt keinen Sinn. Was soll das sein? Solange der User nicht klickt führe else aus? LOL *balla balla*

*balla balla*

Private Nachricht senden

DesignKater

Dabei seit: 26.06.2007
Ort: -
Alter: -
Geschlecht: -

Verfasst Fr 28.10.2011 18:17
Titel

Antworten mit Zitat

Ungetestet:

Code:

$('.projects').click(function(){
$('.projects').animate({height:"50px"},500);
$('.textbox').animate({opacity:"0"});
$(this).animate({height:"140px"},500);
$(this).find('.textbox').animate({opacity:"1"},500);
});

Wenn find nicht funktioniert, versuche next.

Edit: Kurze Erklärung was da passiert:
Bei Klick auf einen beliebigen DIV.projects werden zuerst alle projects auf die Höhe von 50px skaliert und alle textboxen ausgeblendet. Danach wird die .projects die du geklickt hast instant auf eine Höhe von 140px skaliert und die sich darin befindende .textbox angezeigt.

Aletrnativ könntest du auch statt animate opacity mit fadeIn('500') und fadeOut('500) arbeiten. Hat den selben Effekt.

Zuletzt bearbeitet von DesignKater am Fr 28.10.2011 18:20, insgesamt 1-mal bearbeitet

Private Nachricht senden

Ähnliche Themen

CSS Selektor bauen für TR-tag mit zwei Klassen
Zwei CSS-Klassen auf einem Tag in E-Mail-Newsletter
Illustrator CS3: Pfad + zwei verschiedenen Endpunkt-Stärken
OSM/Javascript: Marker auf verschiedenen Layern anklicken?
CSS: links in klassen definieren -pseudoklassen in klassen?
Zwei Selectboxen, Javascript und wechselnder Inhalt

	Seite: Zurück 1, 2
	MGi Foren-Übersicht -> Programmierung

Du kannst keine Beiträge in dieses Forum schreiben.
Du kannst auf Beiträge in diesem Forum nicht antworten.
Du kannst an Umfragen in diesem Forum nicht mitmachen.