mediengestalter.info
FAQ :: Mitgliederliste :: MGi Team

Willkommen auf dem Portal für Mediengestalter

Aktuelles Datum und Uhrzeit: Di 19.03.2024 06:21 Benutzername: Passwort: Auto-Login

Thema: Hover Effekt bei Thumbnails vom 31.01.2012


Neues Thema eröffnen   Neue Antwort erstellen MGi Foren-Übersicht -> Programmierung -> Hover Effekt bei Thumbnails
Seite: 1, 2  Weiter
Autor Nachricht
onetweed
Threadersteller

Dabei seit: 31.01.2012
Ort: -
Alter: -
Geschlecht: Männlich
Verfasst Di 31.01.2012 05:21
Titel

Hover Effekt bei Thumbnails

Antworten mit Zitat Zum Seitenanfang

Guten Tag. Ich habe ein kleines Problem eine Idee umzusetzen. Und zwar habe ich eine Liste von Thumbnails. Wenn man die Seite lädt sollte deren Opacity bei 100% liegen. Fährt man über ein Thumbnail, dann soll bei diesem die Opacity bei 100% bleiben, allerdings bei all den anderen unausgewählten Thumbs auf 70% sinken. Was ich nicht hinkriege: dass die unausgewählten nur 70% Deckkraft haben.

Mein Javascript Code bisher:

$(function() {
// OPACITY OF BUTTON SET TO 100%
$("#img1, #img2, #img3, #img4, #img5").css("opacity","1");

// ON MOUSE OVER
$("#img1, #img2, #img3, #img4, #img5").hover(function () {

// SET OPACITY TO 100%
$(this).stop().animate({
opacity: 1
}, "slow");
},

// ON MOUSE OUT
function () {

// SET OPACITY BACK TO 100%
$(this).stop().animate({
opacity: 1
}, "slow");
});
});



Das könnte man doch bisher auch weglassen, da die Deckkraft ja immer 100% beträgt. (?) Auf jeden Fall nun das fehlerhaft programmierte Stück, das die Deckkraft der unausgewählten Thumbs verringern sollte, was aber nicht funktioniert. Kann mir hierbei jemand weiterhelfen?:


if ("#img3".mouseIsOver)

{$("#img1, #img2, #img4, #img5").stop().animate({
opacity: 0.7
}, "slow");
}


Besten Dank im Voraus!!!
  View user's profile Private Nachricht senden
pixelpapst303

Dabei seit: 06.07.2006
Ort: hamburg
Alter: 50
Geschlecht: Männlich
Verfasst Di 31.01.2012 10:23
Titel

Antworten mit Zitat Zum Seitenanfang

z.b.

Code:

$('img').bind('mouseenter',function(){
   $('img').not($(this)).animate({
      'opacity': .1
   }) ;
});
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
Anzeige
Anzeige
tschuingum

Dabei seit: 17.06.2009
Ort: Karlsruhe
Alter: -
Geschlecht: -
Verfasst Di 31.01.2012 10:33
Titel

Antworten mit Zitat Zum Seitenanfang

Muss es per JS sein? Lässt sich doch relativ simpel per CSS lösen:

Code:
<ul>
<li><img src="xxx.jpg" alt="" width="" height="" /></li>
<li><img src="yyy.jpg" alt="" width="" height="" /></li>
<li><img src="zzz.jpg" alt="" width="" height="" /></li>
</ul>


Code:
ul:hover img {
opacity: 0.7;
}

ul li img:hover {
opacity: 1;
}


Zuletzt bearbeitet von tschuingum am Di 31.01.2012 10:35, insgesamt 1-mal bearbeitet
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
pixelpapst303

Dabei seit: 06.07.2006
Ort: hamburg
Alter: 50
Geschlecht: Männlich
Verfasst Di 31.01.2012 10:42
Titel

Antworten mit Zitat Zum Seitenanfang

auch fein. *zwinker*
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
onetweed
Threadersteller

Dabei seit: 31.01.2012
Ort: -
Alter: -
Geschlecht: Männlich
Verfasst Di 31.01.2012 16:38
Titel

Antworten mit Zitat Zum Seitenanfang

Vielen Dank schon einmal! Das erste Beispiel mit dem JS Code hat bei mir leider gar nicht funktioniert. Passiert nichts... (?).

Beim zweiten mit dem CSS hingegen schon, genauso wie ichs mir vorgestellt hatte. Nur: Leider sind die Übergänge sehr hart. Gäbe es da irgendeine Möglichkeit, eine Überblendung zu machen, damit die Übergänge fliessend sind? (Mit CSS wohl nicht). Ich bräuchte dann wahrscheinlich doch was mit JS, damit ich "slow" angeben kann... Kann mir diesbezüglich jemand weiterhelfen? Danke aber nochmals für die bisherigen Antworten!
  View user's profile Private Nachricht senden
fyll

Dabei seit: 20.09.2003
Ort: Augsburg
Alter: 39
Geschlecht: Männlich
Verfasst Di 31.01.2012 16:40
Titel

Antworten mit Zitat Zum Seitenanfang

onetweed hat geschrieben:
...Nur: Leider sind die Übergänge sehr hart. Gäbe es da irgendeine Möglichkeit, eine Überblendung zu machen, damit die Übergänge fliessend sind? (Mit CSS wohl nicht)....
Doch - such mal nach CSS Transitions.
  View user's profile Private Nachricht senden
onetweed
Threadersteller

Dabei seit: 31.01.2012
Ort: -
Alter: -
Geschlecht: Männlich
Verfasst Di 31.01.2012 17:06
Titel

Antworten mit Zitat Zum Seitenanfang

Vielen Dank! Ich wurde fündig mit:

-webkit-transition-property: opacity;
-webkit-transition-duration: 0.5s;

(resp. -moz- für Firefox).
Danke nochmals für eure Hilfe!
  View user's profile Private Nachricht senden
onetweed
Threadersteller

Dabei seit: 31.01.2012
Ort: -
Alter: -
Geschlecht: Männlich
Verfasst Di 31.01.2012 23:25
Titel

Antworten mit Zitat Zum Seitenanfang

Ein Detail ist mir allerdings noch nicht gelungen:

Wenn man mit der Maus nun ausserhalb dieser Thumbnails fährt, dann wird die Deckkraft natürlich vom einen auf den anderen Augenblick 100%. Schöner wäre es, wenn es ebenfalls langsam geschehen würde. Wie bei den Übergängen von Thumbnail zu Thumbnail.

Hat jemand irgendwelche Vorschläge diesbezüglich?

Ich habe probiert, auch bei img:link, img:active und img:visited jeweils
opacity: 1;
-webkit-transition-property: opacity;
-webkit-transition-duration: 0.5s;

hinzuzufügen. Allerdings hatte dies keine Auswirkungen...
  View user's profile Private Nachricht senden
 
Ähnliche Themen a:hover effekt
CSS Hover Effekt im IE
Flash CS3 - hover Effekt
hover-effekt bei text?
Problem mit CSS Hover Effekt
CSS - Problem mit Hover-Effekt
Neues Thema eröffnen   Neue Antwort erstellen Seite: 1, 2  Weiter
MGi Foren-Übersicht -> Programmierung


Du kannst keine Beiträge in dieses Forum schreiben.
Du kannst auf Beiträge in diesem Forum nicht antworten.
Du kannst an Umfragen in diesem Forum nicht mitmachen.