JavaScript Hover/Mouseover Einblendeffekt

[AlexLi]

moinmoin,

habe folgende Frage:

Wie schaffe ich es, dass bei einem Mouseover/Hover Effekt auf einer Website, ein bestimmter Div-Container eingeblendet wird? Ich weiß zwar, wie es mit CSS gehen würde, doch da "ploppt" der Div ja direkt auf. Da ich aber ein schönes "gleiten" besser fände, ziehe ich dies vor, doch leider habe ich keine Ahnung, wie bzw. ob das mit CSS geht, oder ob man dafür lieber JavaScript nehmen sollte?

Wenn meine Beschreibung den einen oder anderen verwirrt:
Ich meine so etwas, wie es ganz rechts am Rand bei http://mindfactory.de zu sehen ist. Mouseover löst das Event, den Div-Container auszufahren, aus, und der Container gleitet dann sanft nach links, und macht nicht einen schnellen Ruck, und ist dann an seiner Position, wie es bei meiner CSS Variante der Fall wäre.

Da ich leider keine Ahnung von JavaScript habe, und mich auch in nächster Zeit erst einmal nur mit HTML und CSS beschäftigen möchte, wäre es gut, wenn ihr Codeschnipsel parat hättet bzw. Links, wo der Code gut erklärt wird.

Hoffe, ich konnte mein Anliegen gut verdeutlichen und freue mich auf Antworten =D

MfG,
AlexLi

PS.: Falls jemand bessere Varianten kennt, die vielleicht sogar nichts mit JacaScript/CSS zu tun haben, dann trotzdem immer her damit.

 

[pfalli]

mit CSS3 Transformationen kann man Verschiebungrichtung/Drehung/Zeitspanne und so angeben, ausprobieren z.B. http://www.the-art-of-web.com/css/css-animation/

 

[Lord Horu$]

Das würde mich aus gegebenen Anlass auch interessieren!
Hast du evtl. ma nach nem JQuey Plugin geschaut?
Bestimmt gibts da was!


EDIT:
Ich glaube, dass dies hier helfen könnte!
http://cherne.net/brian/resources/jquery.hoverIntent.html
oder
http://tympanus.net/codrops/2010/11/16/hover-slide-effect/

und nochwas, das könnte es wirklich sein:
http://spoonfedproject.com/jquery/jquery-image-slide-on-hover-effect/

 

[palace4d]

Gibt mehrere Möglichkeiten.
Javascript, CSS3, jQuery, SVG.

Hier mal als SVG, weil als JavaScript umgesetzt ist der Code deutlich länger.

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <rect x="50" y="50" width="0" height="80" style="fill: blue">
    <animate attributeName="width" attributeType="XML" begin="0s" dur="5s"
       from="0" to="100" fill="freeze"/>
  </rect>
</svg>

 

[mr-watson]

so ein movement "gleitet dann sanft nach links"
geht nur mit glaub HTML5 und den entsprechenden browser der es kann als/mit css.
bin da aber selbst nicht so der programierer.

momentan nehme ich vorgefertigte jquery module, java scripte mit css.

http://jquery.com/
http://jqueryui.com/demos/

 

[mambokurt]

moinmoin,
Da ich leider keine Ahnung von JavaScript habe, und mich auch in nächster Zeit erst einmal nur mit HTML und CSS beschäftigen möchte, wäre es gut, wenn ihr Codeschnipsel parat hättet bzw. Links, wo der Code gut erklärt wird.

Das einfachste mit JS: <div style="float:right; width:50px">hui</div>, also ein Div das rechts am Bildschirm klebt und 50px breit ist. Da legste mit JS einen EventListener mit onMouseOver drauf, der eine Funktion auslöst, die sich mittels timeout immer wieder selbst aufruft, style.width += 10px ausführt bzw prüft ob die gewünschte Länge des Divs erreicht ist.

Bei Mindfactory ist es so ähnlich, die setzen die Fensterbreite auf einen absoluten Wert und lassen den rechten Teil des Bildes (ja das sind Bilder ) einfach hinterm Bildschirmrand verschwinden, indem sie style="right:-160px" mitgeben. Da liegt dann ein Eventlistener drauf, der bei MouseOver auf style.right jeweils ein paar Pixel dazuaddiert.

Ich _könnte_ dir das jetzt schreiben, aber daran hättest du wohl keinen Spaß, weil da einige Browserbrücken reinmüßten und ich nen halben Roman bräuchte um zu erklären, was da warum wie gelöst ist. Wenn du das wirklich programmieren willst, guck dir mal JQuery(= Sammlung von Javascriptfunktionen) an, das nimmt dir zumindest die bösesten Arbeiten und Browserweichen ab, so dass du dich auf die Lösung des eigentlichen Problems konzentrieren kannst, dann solltest du mittels Google und meiner Erklärung oben eigentlich eine funktionierende Funktion zusammenbekommen...

Ergänzung (22. Juni 2012)

Gibt mehrere Möglichkeiten.
Javascript, CSS3, jQuery, SVG.

Hier mal als SVG, weil als JavaScript umgesetzt ist der Code deutlich länger.

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <rect x="50" y="50" width="0" height="80" style="fill: blue">
    <animate attributeName="width" attributeType="XML" begin="0s" dur="5s"
       from="0" to="100" fill="freeze"/>
  </rect>
</svg>

Kann der IE inzwischen mit SVGs umgehen? Das letzte mal wo ich geguckt hab wars da echt essig O.o

 

[Laci69]

Was hälst du denn hier von?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>

<script type="text/javascript">

$(document).ready(function() {
$("#meindiv").hover(
function () {
$(this).animate({

right: '+=150'
}, 500, function() {

});
},
function () {
$(this).animate({

right: '-=150'
}, 500, function() {

});
}
);
});

</script>
<title>New Document</title>
<div id="meindiv" style="position: absolute; right: -160px; height: 50px; width: 210px; border: 1px solid red;"></div>
</body>
</html>

 

[palace4d]

Kann der IE inzwischen mit SVGs umgehen? Das letzte mal wo ich geguckt hab wars da echt essig O.o

Ab Version 9 schon, jedoch leider keine Animationen. Müsste man für den also in VML machen.

 

[AlexLi]

@Lacia69

Cool, danke, klappt. Einziger kleiner Fehler ist, dass man "position:" in "fixed" umändern muss, ansonsten klappt's super! Vielen Dank.

@palace4d: SVG hat bei mir leider nicht geklappt... Chrome und Firefox haben zwar einen Einblendeeffekt angezeigt, aber der IE konnte leider gar nichts damit anfangen.

EDIT: Oh, leider doch noch einen kleinen Bug festgestellt. Wenn man circa 10mal ganz schnell mit der Maus über den DIV fährt, schiebt der alle Mouseovers in eine "Warteschlange" und arbeitet diese dann ab. Dies sieht etwas seltsam aus, wenn die Maus schon längst vom Div Container weg ist, JavaScript aber immer noch fleißig weiter ein- und ausblendet. Kennt jemand für dieses Problem eine Lösung?

 

[mambokurt]

@Lacia69

Cool, danke, klappt. Einziger kleiner Fehler ist, dass man "position:" in "fixed" umändern muss, ansonsten klappt's super! Vielen Dank.

@palace4d: SVG hat bei mir leider nicht geklappt... Chrome und Firefox haben zwar einen Einblendeeffekt angezeigt, aber der IE konnte leider gar nichts damit anfangen.

EDIT: Oh, leider doch noch einen kleinen Bug festgestellt. Wenn man circa 10mal ganz schnell mit der Maus über den DIV fährt, schiebt der alle Mouseovers in eine "Warteschlange" und arbeitet diese dann ab. Dies sieht etwas seltsam aus, wenn die Maus schon längst vom Div Container weg ist, JavaScript aber immer noch fleißig weiter ein- und ausblendet. Kennt jemand für dieses Problem eine Lösung?

Schnonmal gut, dass du jetzt bei Jquery gelandet bist Dein Bug sitzt in der JQuery Bibliothek, nicht im Code selbst. Die wissen natürlich nicht, was du mit dem Animationsgeschnetz anfängst, und können das dementsprechend nicht abfangen. Du kannst aber:

if(!bInAnimation) {
function () {
var bInAnimation = true;
$(this).animate({ right: '+=150' }, 500, function() { });
var bInAnimation = false;
}
}


Das selbe beim Fadeout und am Anfang des JS beim Initialisieren halt beim Init bInANimation = false setzen. Äquivalent beim Fadeout...

Ergänzung (23. Juni 2012)

Ab Version 9 schon, jedoch leider keine Animationen. Müsste man für den also in VML machen.

Das Problem ist, dass zu viele Leute noch auf IE7 und IE8 hängen, selbst wenn IE9 das supporten würde würd ichs nicht machen sondern eher auf JS ausweichen...

 

[Daaron]

Pft... einfach stur auf CSS3 setzen. Dieses Jahr kommt der IE10 raus, soweit ich weiß. Der kann dann auch CSS Transition&Transform. Wer nicht patched kriegt halt hässliche Popups inklusive ner Warnung, dass der Browser alter Rotz ist.

 

[mercsen]

Daaron du sprichst mir aus der Seele aber so einfach ist das nicht.
Gerade wenn man Firmenorientierte Websites macht. Ich habs gerade durch und durfte ne HP sogar für den IE 6 OHNE JS fit machen.
Das ist eine Arbeit....

Mache es lieber gleich richtig und baue die HP so das sie auf dem ältesten von dir supportete n browser läuft und fange dann an ihr Leben für die höhere versionen einzuhauchen.

 

[Daaron]

Kann man alles über die Kalkulation lösen:

Basis-System für standardkonforme Browser: 600€
Erweiterungen für hochmoderne Browser: 0€
Bugfixes für IE8: 50€
Bugfixes für IE7: 150€
Bugfixes für IE6: 350€
jeweils kumulativ...

Schon überlegen die Kunden, ob sie so einen Haufen Arbeitszeit für 10 Jahre alten Schrott mit nem Marktanteil von 1-2% finanzieren wollen. In den IE6 zu investieren lohnt sich nur in China (Marktanteil 22,6%).