Autor |
Nachricht |
onetweed
Threadersteller
Dabei seit: 31.01.2012
Ort: -
Alter: -
Geschlecht:
|
Verfasst Di 31.01.2012 06:21
Titel Hover Effekt bei Thumbnails |
|
|
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!!!
|
|
|
|
|
pixelpapst303
Dabei seit: 06.07.2006
Ort: hamburg
Alter: 50
Geschlecht:
|
Verfasst Di 31.01.2012 11:23
Titel
|
|
|
z.b.
Code: |
$('img').bind('mouseenter',function(){
$('img').not($(this)).animate({
'opacity': .1
}) ;
});
|
|
|
|
|
|
Anzeige
|
|
|
tschuingum
Dabei seit: 17.06.2009
Ort: Karlsruhe
Alter: -
Geschlecht: -
|
Verfasst Di 31.01.2012 11:33
Titel
|
|
|
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 11:35, insgesamt 1-mal bearbeitet
|
|
|
|
|
pixelpapst303
Dabei seit: 06.07.2006
Ort: hamburg
Alter: 50
Geschlecht:
|
Verfasst Di 31.01.2012 11:42
Titel
|
|
|
auch fein.
|
|
|
|
|
onetweed
Threadersteller
Dabei seit: 31.01.2012
Ort: -
Alter: -
Geschlecht:
|
Verfasst Di 31.01.2012 17:38
Titel
|
|
|
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!
|
|
|
|
|
fyll
Dabei seit: 20.09.2003
Ort: Augsburg
Alter: 39
Geschlecht:
|
Verfasst Di 31.01.2012 17:40
Titel
|
|
|
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.
|
|
|
|
|
onetweed
Threadersteller
Dabei seit: 31.01.2012
Ort: -
Alter: -
Geschlecht:
|
Verfasst Di 31.01.2012 18:06
Titel
|
|
|
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!
|
|
|
|
|
onetweed
Threadersteller
Dabei seit: 31.01.2012
Ort: -
Alter: -
Geschlecht:
|
Verfasst Mi 01.02.2012 00:25
Titel
|
|
|
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...
|
|
|
|
|
|
|
|
Ähnliche Themen |
a:hover effekt
CSS Hover Effekt im IE
CSS - Problem mit Hover-Effekt
Flash CS3 - hover Effekt
hover-effekt bei text?
Problem mit CSS Hover Effekt
|
|