[JQUERY] jQuery - animate mit if - else (hasClass und removeClass)

[LikeStar]

Hallo Community,

mit folgendem Code lasse ich meine 3 Elemente verschwinden und wieder einblenden:

jQuery(document).ready(function() {
    $("#market1").click(function(){
        $el = $("#market1");
        if ($el.hasClass("islarge")) {
            $el.removeClass("islarge");
            $el.stop().animate({opacity:"1.0"});
        } else {
            $el.addClass("islarge");
            $el.stop().animate({opacity:"0.0"});  
        }
     });
 });

jQuery(document).ready(function() {
    $("#market2").click(function(){
        $el = $("#market2");
        if ($el.hasClass("islarge")) {
            $el.removeClass("islarge");
            $el.stop().animate({opacity:"0.0"});
        } else {
            $el.addClass("islarge");
            $el.stop().animate({opacity:"1.0"});  
        }
     });
 });

jQuery(document).ready(function() {
    $("#market3").click(function(){
        $el = $("#market3");
        if ($el.hasClass("islarge")) {
            $el.removeClass("islarge");
            $el.stop().animate({opacity:"0.0"});
        } else {
            $el.addClass("islarge");
            $el.stop().animate({opacity:"1.0"});  
        }
     });
 });

Funktioniert wunderbar. Jetzt möchte ich es aber so machen, dass wenn Element 1
langsam eingeblendet wird, die Elemente 2 und 3 dafür ausgeblendet werden?

Wie geht das?

 

[kkapsner]

Das ist doch die gleiche Frage wie in http://forum.jswelt.de/javascript/61073-jquery-animate-opacity.html#post392720 ...

PS: Wenn der Code für alle 3 gleich aussieht (bis auf den Selektor) solltest du dir vielleicht überlegen, wie du ihn generalisieren kannst, so dass du ihn nicht an drei stellen warten musst...

 

[mikdoe]

Sollten wir das mal zusammenlegen, Korbinian?

 

[LikeStar]

Das ist doch die gleiche Frage wie in http://forum.jswelt.de/javascript/61073-jquery-animate-opacity.html#post392720 ...

PS: Wenn der Code für alle 3 gleich aussieht (bis auf den Selektor) solltest du dir vielleicht überlegen, wie du ihn generalisieren kannst, so dass du ihn nicht an drei stellen warten musst...

Hi,

ja der Beitrag wurde schon viel früher geschrieben. Siehe Datum.
Später habe ich bemerkt, dass dieser sich in der falschen Rubrik befindet.

 

[mikdoe]

Ich hab den anderen Thread gelöscht.

Später habe ich bemerkt, dass dieser sich in der falschen Rubrik befindet.

In diesem Fall bitte PN an kkapsner oder mich und nicht einfach einen neuen aufmachen.

Aber wo ist bei dieser Frage die "Serverseitige Programmierung"?

 

[LikeStar]

Ich hab den anderen Thread gelöscht.


In diesem Fall bitte PN an kkapsner oder mich und nicht einfach einen neuen aufmachen.

Aber wo ist bei dieser Frage die "Serverseitige Programmierung"?

Hatte ich dir doch mitgeteilt. Befindet sich in der falschen Rubrik ;-)
Demnächst schicke ich eine PN.

Frage mich gerade, weshalb der Thread im Bereich Javascript entfernt wurde.
Hat doch weniger mit einem Server zu tun.

 

[mikdoe]

Ich hab den anderen entfernt, weil er älter war.
Und hier hin hast du diesen hier selbst gesetzt. Daher meine Frage, was ist daran "serverseitig"?

 

[LikeStar]

Nein. Die 1. Threads die am Ältesten waren, befanden sich hier in dieser Rubrik. Weil diese sich aber in der falschen Rubrik befanden, hat sich Niemads diesbezüglich geäußert.

Danach folgten die gleichen Threads im Bereich Javascript.

 

[mikdoe]

Au Mann. OK, lass ich jetzt mal so stehen. Aber mach das bitte nicht nochmal!

*verschoben aus serverseitige Progr.*

 

[LikeStar]

Au Mann. OK, lass ich jetzt mal so stehen. Aber mach das bitte nicht nochmal!

*verschoben aus serverseitige Progr.*

Danke ^^

Edit:

Ich brauche wirklich Hilfe. Kann mir da Niemand helfen? =/

 

[LikeStar]

?

 

[s4ty]

Probiere mal das:

jQuery(function() {
  var $markets = $("[id^=market]").click(function(){
    var $self = $(this);
    $markets.each(function () {
      if($(this).attr('id') === $self.attr('id')) {
        $(this).addClass("islarge");
        $(this).stop().animate({opacity: 1});
      } else {
        $(this).removeClass("islarge");
        $(this).stop().animate({opacity: 'toggle'});  
      }
    });
  });
});

http://jsbin.com/yajelojete/1/edit?js,output

 

[LikeStar]

Probiere mal das:

JS Bin - Collaborative JavaScript Debugging

Ach mist. Das kannst du nicht wissen.

Alle 3 #Market Elemente haben zu Anfang eine Opacity von 0.0.
Klickt man auf eines der #Market Elemente, erscheint das angeklickte mit Opacity: 1.0

Klicke ich kurz darauf auf ein anderes #Market Element, wird das andere wieder mit Opacity:0.0
ausgeblendet und dafür das angeklickte eingeblendet.

Hoffe ich konnte es einigermaßen verständlich erklären

Edit: Weil ich deinen Code verwendet habe. Es erscheint mir leider fehlerhaft. Manchmal "springt"
ein Element vor sich hin.

 

[LikeStar]

Edit: Danke. Habe deinen Code selbst angepasst.