• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

[ERLEDIGT] jQuery: für verschiedene Container jeweils die gleiche Funktion verwenden

Der Horst

Mitglied
Abend euch allen,
ich habe da meine jQuery Funktion und 6 verschiedene Container, die diese Funktion verwenden, doch möchte ich nicht 6-mal den Code für jeden Container neu schreiben. Gäbe es da eine Möglichkeit?

Hier ist meine jQuery-Funktion, wobei 'move_right', der zu bewegender Container ist und 'right' der Link, die Bewebung startet.
HTML:
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
    </script>
    <script>
        $(document).ready(function(){
            var right="#right";
            $(right).mouseover(function(){
                var div=$("#move_right");
                div.animate({height:'100px'},{duration: 1000, queue: false });
                div.animate({width:'100px'},{ duration: 1000, queue: false });
                div.css('display','block');


            });
            $("#right").mouseleave(function(){
                var div=$("#move_right");
                div.animate({height:'0px'},{duration: 1000, queue: false });
                div.animate({width:'0px'},{ duration: 1000, queue: false });


            });
        });
    </script>
Beispiel für zwei der Container
HTML:
 <td width="50%">
                      <h3><a id="right" href="galerie">Bildergalerie</a></h3>
                      <div id="move_right">Hier bekommen Sie eine ausführliche Erkärung über das Kendo.</div>
                  </td>

                  <td width="50%">
                      <h3><a href="team">Das Team</a></h3>

                  </td>
              </tr>
              <tr>
                  <td width="50%">
                      <h3><a id="right" href="kata">Katas</a></h3>
                      <div id="move_right">Hier bekommen Sie eine ausführliche Erkärung über das Kendo.</div>
                  </td>
Ich danke euch für eure Hilfe
 
Werbung:
Hallo,

als erstes solltest das erst mal zusammen packen
HTML:
$("#right").mouseover(function(){
...
}).mouseleave(function(){
...
});

dann sprichst einfach div an da solltest eher next() nehmen, so kannst den negsten div animieren.
das #right ist auch nicht schön, zumindest zum ansprechen gerade wenn das 6 mal sein soll. mach besser eine classe und die kannst ja alle 6 geben und spichst dann die an.

Das grundgerüst als Tabelle geht ja nun gar nicht, das solltest zuerst mal richtig machen :O).

Cheffchen
 
ungetestet:
Code:
$('#one', '#two', '#three').hover(
    // mouseover
    function() {
        $(this).css('background', 'red');
    },
    // mouseout
    function() {
        $(this).css('background', 'blue');
    }
);

Das Zauberwort heißt this.
 
Werbung:
Zurück
Oben