Problem mit if Bedingung und Jquery

[jayplaya1]

Hallo Leute, hab da ein kleines Problem. Bin noch nicht lange mit JS und JQ unterwegs und werd glaub ich nicht wirklich selber darauf kommen, folgendes:

Ich hab 2 Div Container die bei einem Onclick event manipuliert werden sollen.

Bei dem Klick auf dem kleineren soll der Kleinere so groß wie der Größere werden und der Größere so klein wie der kleinere, andersrum genauso. also ist der Größere klein, soll er bei Onclick wieder größer werden. Klappt soweit auch ganz gut, bloß klicke ich jetzt z.B. 2 mal den kleineren wird der kleinere 2 mal so groß, ich hoffe ihr wisst was ich meine. Habs mit ner if anweisung probiert, die ist aber nicht so gelaufen wie gewollt. Hier mal der Code, hoffe ihr könnt mir helfen:

<script type="text/javascript">
                         
 $("#gbone_ma_sm").click(function(){
		 $("#gbone_ma_bi").animate({
                        width: "-=210",
			height: "-=14"
                     
                    }, 400);
		$("#gbone_ma_sm").animate({
                        width: "+=210",
			height: "+=14"
                        
                    }, 400);
    });
                          
                          
						
								
		$("#gbone_ma_bi").click(function(){
		 $("#gbone_ma_sm").animate({
                        width: "-=210",
			height: "-=14"
                     
                    }, 400);
		$("#gbone_ma_bi").animate({
                        width: "+=210",
			height: "+=14"
                    
                    }, 400);
					
								

    });

Mit .one kann ichs zwar einmal ausführen, aber halt nur einmal, will das es sozusagen hin und her geht.

 

[Parantatatam]

Probier es mal so:

$('#gbone_ma_sm').click(function () {
  var width1  = $(this).css('width');
  var height1 = $(this).css('height');
  var width2  = $('#gbone_ma_bi').css('width');
  var height2 = $('#gbone_ma_bi').css('height');
  
  $('#gbone_ma_bi').animate({
    width: width1,
    height: height1,
  }, 400);
  $(this).animate({
    width: width2,
    height: height2,
  }, 400);
});

 

[jayplaya1]

hey coole Sache, danke dir.

hab aber jetzt mal noch ein paar andere Fragen.

Wie bekomme ich es hin das wenn der eine groß ist, inaktiv bleibt und nur der andere Kleine wieder per Klick groß wird?

Dann hab ich gerad probiert den cursor auf : 'default' zu stellen, aber geht nicht, gibts da vllt noch die möglichkeit #gbone_ma_sm:hover auszustellen, oder ähnliches?

Besten dank nochmal

 

[Parantatatam]

Vermutlich kannst du das Ereignis irgendwie deaktivieren oder du baust deinen Quelltext in eine Bedingung ein (funktioniert noch nicht ganz so, wie es sollte, habe aber gerade keine Zeit das auszubessern):

$('.buttons').click(function () {
  var self    = $(this);
  var width1  = self.css('width');
  var height1 = self.css('height');
  var width2  = 0;
  var height2 = 0;
  var max     = null;
  
  $('.buttons').each(function () {
    if(($(this) !== self) && (max === null)) {
      width2  = $(this).css('width');
      height2 = $(this).css('height');
      max     = (width2 < width1 || height2 < height2);
    }
  });
  
  if(!max) {
    $('.buttons').not(this).animate({
      width: width1,
      height: height1,
    }, 400);
    self.animate({
      width: width1,
      height: height1,
    }, 400);
  }
});

<div class="buttons" style="width:400px;height:400px;"></div>
<div class="buttons" style="width:200px;height:200px;"></div>
<div class="buttons" style="width:200px;height:200px;"></div>

http://jsfiddle.net/MeiKatz/YrxGD/

 

[DexXxtrin]

Einfach so geht das nicht?

$('#gbone_ma_sm').click(function () {
  var width1  = $(this).css('width');
  var height1 = $(this).css('height');
  var width2  = $('#gbone_ma_bi').css('width');
  var height2 = $('#gbone_ma_bi').css('height');
  
  if((this).css('width') < width2){
	  $('#gbone_ma_bi').animate({
		width: width1,
		height: height1,
	  }, 400);
	  $(this).animate({
		width: width2,
		height: height2,
	  }, 400);
  }
});

 

[jayplaya1]

Hakt irgendwo noch in der if(width1 < width2) rum, also andersrum gehts dann immer wieder. Wollte das aber eigentlich so haben, weil ich der Meinung war, das es so Eindeutiger, bzw Benutzerfreundlicher ist/war, lag da aber falsch. Beim Testen mit der ersten Version ist mir aufgefallen das es angenehmer ist wenn man hin und her switchen kann und das egal auf welchem DIV.

Auf jeden Fall nochmal danke an euch!!

 

[DexXxtrin]

Hab einen kleinen Nachtrag. Ich weiss nicht was der Wert "width" ausgibt.
Wenn der Inhalt der Variable dann "200px" ist, ist das wohl verständlich wiese die IF-Abfrage nicht funktioniert.
Müsste man halt irgendwie auseinander nehmen.

 

[jayplaya1]

Hey DexXxtrin, hab mich doch nochmal an dein (width1<width2) rangesetzt und funktioniert wunderbar Ist wohl doch wirklich so besser, hehe.

Aber doch noch ne Frage. Per default ist jetzt bei dem gbone_ma_bi:hover kein corser und keine andere Textfarbe gesetzt, wie kann ich den jetzt per JQ beim Klick auf gbone_ma_sm diese beiden werte in gbone_ma_bi:hover setzten? und umgekert ind gbone_ma_sm:hover ausschalten? Irgendwie will der das nicht machen...