JQuery: Divbox hervorheben und alles andere 50% Transparent.

Routinier

Dabei seit: 10.01.2011

Montag, 16. Januar 2012, 23:45

Hallo ,

Ich habe eine Liste mit Divboxen (wie Tabelle ) , wenn ich mit der Maus über eine Divbox bin , möchte ich das diese Divbox so bleibt wie Sie ist.
Alle anderen aus der Liste sollen 50% transparent werden. So das die aktuelle Divbox hervorgehoben wird.

Hat einer ein Tipp für mich ?

Danke
Gruß
Jens

cccpmik

Foren Gott

Dabei seit: 04.09.2007

Beiträge: 2 999

Dienstag, 17. Januar 2012, 08:40

http://jsfiddle.net/VvwnY/

5 minuten arbeit

Mein kleines Projekt
-Cruel Online-

Deffcon

König

Dabei seit: 11.11.2010

Beiträge: 897

Dienstag, 17. Januar 2012, 14:57

Ja - aber verkehrt herum.

Er will ja nicht das ausgewählte Div abblenden sondern alle anderen.
Es soll als Highlighting gelten.

Und das geht mit der CSS Variante glaube ich nicht.

In jQuery kannst du das machen wie folgt:

Javascript-Quelltext

<script type="text/javascript" src="http://code.jquery.com/jquery-1.5.1.js"></script>

<script type="text/javascript"> 

$(document).ready(function(){

            $("#divone").mouseover(function(){ 
            $("#divtwo, #divthree").stop().animate({opacity:'0.5'},300); 
            }); 
            $("#divone").mouseout(function(){ 
            $("#divtwo, #divthree").stop().animate({opacity:'1.0'},200); 
            });  
			
	    $("#divtwo").mouseover(function(){ 
            $("#divone, #divthree").stop().animate({opacity:'0.5'},300); 
            }); 
            $("#divtwo").mouseout(function(){ 
            $("#divone, #divthree").stop().animate({opacity:'1.0'},200); 
            });  
			
	    $("#divthree").mouseover(function(){ 
            $("#divtwo, #divone").stop().animate({opacity:'0.5'},300); 
            }); 
            $("#divthree").mouseout(function(){ 
            $("#divtwo, #divone").stop().animate({opacity:'1.0'},200); 
            });
  
	});
</script>

Das wäre jetzt komplett mit jquery Einbindung per Link.
Man kann auch mouseenter statt over nehmen. Wäre syntaktisch besser denke ich wenn man enter&out nimmt.
Als Beispiel mit 3 Divboxen wodurch beim jeweiligen überfahren die anderen abgeblendet werden durch opacity:"0.5"
Du kannst die Transparenz auch anders einstellen und auch die Übergänge.
Mit animate ist es ein zeitlicher Übergang in die Transparenz. Vielleicht hier ganz gut. Die Animationsdauer kannst du hinten mit der Zahl (200/300) einstellen dass es schneller oder langsamer geht.

MFG Simon

Dieser Beitrag wurde bereits 1 mal editiert, zuletzt von »Deffcon« (17. Januar 2012, 14:57)

jegi0605

Routinier

Dabei seit: 10.01.2011

Beiträge: 259

Dienstag, 17. Januar 2012, 15:25

Hey , erstmal vielen Danke für eure Hilfe !

Das Problem ist , das die Divboxen aus einer Datenbank erfolgen , also dynamisch erzeugt werden.
Auf einer Seite sind immer 8 Einträge vorhanden. Also müsste ich erstmal einen Counter für die Divboxen reinbringen , damit ich Sie ansprechen kann.
Ich werde das mal ausprobieren.

DANKE

cccpmik

Foren Gott

Dabei seit: 04.09.2007

Beiträge: 2 999

Dienstag, 17. Januar 2012, 17:15

natürlich gehts auch anders herum:

http://jsfiddle.net/VvwnY/3/

und mit jquery würde ich divs in eine gruppe packen
etwa so:

	HTML
1 2 3 4 5	<div id="group"> <div></div> <div></div> <!-- usw.. --> </div>

und so dann die transparenz animieren
http://jsfiddle.net/VvwnY/5/

MFG

Mein kleines Projekt
-Cruel Online-

Deffcon

König

Dabei seit: 11.11.2010

Beiträge: 897

Dienstag, 17. Januar 2012, 19:30

In deiner zweiten CSS Variante wird ja aber alles transpariert. Ist ja auch nicht das Gewollte.

Bei der jQuery Variante müsste man nurnoch ein mouseout hinzufügen, dass alle div's wieder auf 1.0 kommen.

cccpmik

Foren Gott

Dabei seit: 04.09.2007

Beiträge: 2 999

Dienstag, 17. Januar 2012, 23:11

ist doch auch kein Problem:

http://jsfiddle.net/VvwnY/6/

Mein kleines Projekt
-Cruel Online-

jegi0605

Routinier

Dabei seit: 10.01.2011

Beiträge: 259

Donnerstag, 19. Januar 2012, 00:03

Habe beide Varianten ausprobiert und bei beide funktionieren einwandfrei , ein DANKE erstmal dafür.

Jedes hat seine Vorteile und Nachteile.

JQuery :
Kann man mit schönen Effekten versehen , dafür nicht ganz so leicht einzubauen.
Wenn Javascript deaktiviert ist , geht es nicht.

CSS:
sehr leicht einzubauen , dafür leider keine Effekte möglich.
Funktioniert auch bei ausgeschaltetem Javascript.

cccpmik

Foren Gott

Dabei seit: 04.09.2007

Beiträge: 2 999

Donnerstag, 19. Januar 2012, 08:37

Zitat von »jegi0605«

CSS:
sehr leicht einzubauen , dafür leider keine Effekte möglich.

das halte ich für ein gerücht schau mal dir die seite an, OHNE javascript http://cccpmik.wmw.cc/animation/ im Firefox. habe dort keine CSS3 Crossbrowser animation aber man somit auch das fadein fadeout effekt mit reinem CSS lösen für moderne browser natürlich

Mein kleines Projekt
-Cruel Online-

jegi0605

Routinier

Dabei seit: 10.01.2011

Beiträge: 259

Donnerstag, 19. Januar 2012, 16:44

Ja , aber dafür ist CSS leider nicht ausgelegt , auf 1 Km lange CSS habe ich keine Lust :-)

cccpmik

Foren Gott

Dabei seit: 04.09.2007

Beiträge: 2 999

Donnerstag, 19. Januar 2012, 16:54

ignoriere meine CSS datei, dort habe ich einfach mehr definiert als auf der beispiel animation zu sehen ist, das ist nur der relevante quellcode

Cascading Style Sheet

.M1-1{
    background:url(red_knight_128.png) no-repeat;
}

.player{
    width:128px;
    height:128px;
    position:relative;
    z-index:10;
}

.walk-s{
    -moz-animation-name:walk-s;
    -moz-animation-duration: 1s;
    -moz-animation-iteration-count:infinite;
 
}



@-moz-keyframes walk-s{
0%{
background-position:   -896px  -512px;
-moz-animation-timing-function:steps(1,end);
}
12.5%{
background-position:   -768px  -512px;
-moz-animation-timing-function:steps(1,end);
}
25%{
background-position:   -640px  -512px;
-moz-animation-timing-function:steps(1,end);
}
37.5%{
 background-position:   -512px  -512px;
 -moz-animation-timing-function:steps(1,end);
}
50%{
  background-position:   -384px  -512px;  
  -moz-animation-timing-function:steps(1,end);
}
62.5%{
 background-position:   -256px  -512px;  
 -moz-animation-timing-function:steps(1,end);
}
75%{
  background-position:   -128px  -512px; 
  -moz-animation-timing-function:steps(1,end);
}
87.5%{
  background-position:      0px  -512px;  
  -moz-animation-timing-function:steps(1,end);
}
}

und der ist nicht 1km lang

Mein kleines Projekt
-Cruel Online-