Wie man Panel mit Schwebeflug zeigt

Question

Hallo das ist ziemlich grundlegende jQuery Sachen, aber ich bin ein wenig verloren. So habe ich ein 310px Bilder, die meist von der Seite mit etwas versteckt ist wie:

.bottom-panel {position: fixed; 
width:874px; 
height: 310px; 
display: block; 
bottom: -300px; 
left: 150px; 
background: url(theimg.png) transparent no-repeat; 
} 

nur die kleine 10px hoch Lasche am Boden ragt. Ich versuche, mit dem hoverIntent Plugin, Interaktivität zu schaffen, in dem über die kleinen Registerkarte schwebt die CSS bewirkt

bottom: 0px; 

und bleibt „erweitert“ auf der Seite, solange die Maus innerhalb des .bottom ist überall zu ändern -Panel

Kann mir jemand ein kleines Schnipsel oder eine Anweisung geben, um mir dabei zu helfen?

Answer 1

First off, können Sie sicherstellen, dass jQuery Standard Hover funktioniert für Sie:

$('.bottom-panel').hover(function() { 
    $(this).animate({bottom: 0}, 'fast'); 
}, function() { 
    $(this).animate({bottom: -300}, 'fast'); 
}); 

Sobald Sie haben, dass die Arbeit so, wie Sie es wollen, alles, was Sie tun müssen, um das Wort ersetzen ‚schweben‘ mit 'HoverIntent', und Sie sollten gut gehen.