2010-12-02 28 views
2

Ich habe 2 div s. In jedem Div habe ich einige Inhalte und auch ein anderes div, das standardmäßig ausgeblendet ist und relativ über dem Inhalt positioniert ist. Wenn ich über das div schwebe, möchte ich, dass das versteckte div nach oben gleitet. Was ich versuchte, funktioniert nicht für mich.SlideToggle div über Inhalt

code .. Ill zeigen nur einen Teil davon, da beide divs gleich sind. HTML:

<div class="youtube"> 
    <h1> Youtube </h1> 
    <span></span> 
    <div class="yt-desc"> 
    <p> 
     Pellentesque habitant morbi tristique senectus et 
     netus et malesuada fames ac turpis egestas. 
     Pellentesque habitant morbi tristique senectus et 
     netus et malesuada fames ac turpis egestas. 
     </p> 
    </div><!-- // .yt-desc --> 
    </div> <!-- // .youtube --> 

CSS:

Heres die CSS für eine, die .forums ist genau das gleiche. Ich habe das unnötige css herausgenommen.

.youtube, .forums { background: #3c3c3c url(../images/boxes-bg.jpg) repeat-x; float: left; position: relative; z-index: -1; width: 260px; } 
.youtube h1, .forums h1 { text-indent: -9999px; margin: 26px auto; } 
.youtube { margin: 0 216px 0 0; } 
.youtube h1 { background: url(../images/yt-header.png) no-repeat; height: 36px; margin: 21px; auto; width: 212px; } 
.youtube span { background: url(../images/icons/youtube.png) no-repeat; display: block; height: 75px; margin: 26px auto; width: 79px; } 

.youtube .yt-desc, .forums .forums-desc { position: absolute; top: 94px; left: 0px; padding: 5px; display: none; } 

yt-desc ist, was ich versuche, zu schieben. Aber aus irgendeinem Grund funktioniert es nicht.

Ive versucht.

$(".youtube").hover(function() { 
    $(".yt-desc").slideToggle("fast"); 
}); 

Immer noch kein Glück. Kann jemand helfen? :/Heres eine Idee von dem, was ich zu bekommen habe versucht - alt text

+0

Ich denke, das ist das, was ich will, ich versuchte es, aber es immer noch nicht funktioniert . – omnix

+0

http: // Stapelüberlauf.com/questions/3654829/jquery-mouse-über-div-slideup-und-mouse-out-div-slidedown – omnix

+0

Gibt es Javascript-Fehler auf der Seite? –

Antwort

0
$(".youtube").hover(
    function() { $(this).children(".yt-desc").show("fast"); }, 
    function() { $(this).children(".yt-desc").hide("fast"); } 
); 

Diese funktionieren sollte. Ich hoffe,

+0

Nein, tut es nicht:/ – omnix

+0

Gibt es einen Fehler auf Firebug? –

+0

Konsole sagt: fehlender formaler Parameter [Break on this error] Funktion() {$ (this) .children (". Yt-desc"). Show ("fast"); }, \ n – omnix

7

Wenn ich richtig verstehe, Sie so etwas wie dies wollen: example

Mit display: none nicht das Element machen, bis Sie „Show“ es, so mit overflow: hidden das Element versteckt weg ist wahrscheinlich besser.

Here is a nice tutorial on a similar effect

Hat Ihr Problem wirklich lösen können, hoffe, es hilft trotzdem!

EDIT: Ihr Code mit meinem Beispiel:

CSS

.youtube, .forums { background: #3c3c3c url(../images/boxes-bg.jpg) repeat-x; position: relative; width: 260px; overflow: hidden;} 
.youtube h1, .forums h1 { text-indent: -9999px; margin: 26px auto; } 

.youtube { margin: 0 216px 0 0; } 
.youtube h1 { background: url(../images/yt-header.png) no-repeat; height: 36px; margin: 21px; auto; width: 212px; } 
.youtube span { background: url(../images/icons/youtube.png) no-repeat; display: block; height: 75px; margin: 26px auto; width: 79px; } 

.youtube .yt-desc, .forums .forums-desc { width: 260px; position: absolute; bottom: -200px; padding: 5px;} 

JQuery

$(".youtube").hover( 
    function(){   $(this).children("div.yt-desc").stop().animate({bottom: 0}, 500); 
    }, 
    function(){    $(this).children("div.yt-desc").stop().animate({bottom: -20}, 500); 
}); 
+0

Das ist genau was ich will! Aber ich kann es immer noch nicht zur Arbeit bringen! – omnix

+0

Omnix: 'Z-Index' vermasselt die Hover-Methode von jQuery - ich denke du musst das umgehen. – nhilae

+0

Sieht so aus, als ob Firefox den 'Z-Index: -1' nicht mag, der wahrscheinlich unter '' liegt, was Firefox' Hover/Click/... Handling betrifft. Auf der anderen Seite ist die Einstellung "z-index" hier nicht notwendig. –

1

Manche mögen diese http://jsfiddle.net/ambiguous/ENpsH/3/ sollte funktionieren; Ich entfernte alle überflüssigen Sachen aus Ihrer Probe und fing an, die nötigen Bits wieder einzusetzen. Die Grundidee ist, Ihren gleitenden Weg unterhalb des Containers zu positionieren und ihn dann bis zum Rand zu stecken, wenn Sie wissen, wie groß der Container ist; dann können Sie einfach die top bei Hover-Aktionen nach oben und unten animieren.

+0

Das Beispiel, das du mir gegeben hast, hat nicht funktioniert:/ – omnix

+0

@omnix: Es funktionierte in Safari, aber Firefox mochte den 'z-index: -1' nicht, ich nahm den' z-index' heraus und Firefox ist jetzt glücklich mit meinem aktualisierten Beispiel. –

0

Ich habe das Problem gefunden. In der CSS-Dateizeile 43:

.youtube, .forums { background: #3c3c3c url(../images/boxes-bg.jpg) repeat-x; border: 1px solid #3c3c3c; border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; float: left; position: relative; z-index: -1; width: 260px; } 

Entfernen Sie den Z-Index: -1;

Ich reparierte die Javascript, nur um es auf dem Bildschirm zeigen lassen und jetzt müssen Sie die Werte beheben:

$(".youtube").hover( 
     function(){ 
      $(this).children(".yt-desc").show().animate({top: '+=50',}); 
     }, 
     function(){ 
      $(this).children(".yt-desc").hide().animate({top: '-=50',}); 
     } 
    ); 
+0

Das ist perfekt, aber jetzt geht yt-desc hoch [zeigt alles] dann geht es halb runter. – omnix

+0

Wie gesagt, Sie müssen die Animation reparieren. –

+0

Was meinst du? Ich habe auch ein paar herumgemöbelt, aber wenn ich es mache, schweben Sie darüber, das Div springt einfach an zufällige Stellen. – omnix