✔ animate Anzeigen, animate Ausblenden, funktioniert nicht!

[Daaguru]

moin,

seit nun mehreren Stunden und unterschiedlichsten Varianten, Google etc.
Poste ich hier mein Prob in der Hoffnung Lösung zu finden.

Folgende Situation:

Ich habe einen Div-Container.
Darin ist ein Unsichtbarter Container mit einem CLOSE Link.

Bei Klick auf den Container, soll der Unsichtbare Container angezeigt werden. (klappt soweit)
Bei Klick auf den CLOSE Link soll dieser aber wieder ausgeblendet werden.

Problem: Bei klick auf den Close Link, wird der Container geschlossen und wieder geöffnet.

Hier der Code dazu:

// einblenden von div container mit der ID die über den rel-wert übergeben wird
$("div[rel]").click(function() {
        var element= 'div ' + $(this).attr("rel");
        $(element).animate({opacity: 0.95, height: '100px'},300 );  
});

//ausblenden
$(".hide").click(function(){
		var element= 'div ' + $(this).attr("rel");
		$(element).animate({opacity: 0, height: 0}, 300);
		$(this).animate({opacity: 0, height: 0}, 300);	
});

// -----------------------------------------------------------------------------------

<div class="reference ref_1" rel="#ref_1">
    <div id="ref_1">
        Inhalt... <a class="hide" rel="#ref_1">close</a>
        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod   
        tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. 
    </div>
</div>

Bin euch für jede Hilfe, Lösung, Link, Tipp dankbar!

~daA|guRu~

 

[Quaese]

Hi,

vermeide mit stopPropagation, dass der Event weitergereicht wird.

$(".hide").click(function(evt){
  evt.stopPropagation();
  var element= 'div ' + $(this).attr("rel");
  $(element).animate({opacity: 0, height: 0}, 300);
  $(this).animate({opacity: 0, height: 0}, 300);
});

Ciao
Quaese

 

[Daaguru]

Quaese, vielen Dank!
Hat geklappt!