Skip to content

Instantly share code, notes, and snippets.

@Werninator
Last active August 29, 2015 14:05
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save Werninator/6cd54092c3ae598a11d5 to your computer and use it in GitHub Desktop.
Save Werninator/6cd54092c3ae598a11d5 to your computer and use it in GitHub Desktop.
Kleines Script zum triggern von Dropdowns. Nutzt jQuery.
<script type="text/javascript">
jQuery(function($) {
// Timervariable für die setTimeout-Funktion
var timer;
/* Änderbare Daten: */
// Klassennamen
var hoverBox = '.hoverBox';
var hoverLink = '.hoverLink';
// Angabe in ms: Wann wird das Dropdown ausgeblendet?
var hideInterval = 250;
/* Änderbare Daten Ende */
// Diese CSS-Eigenschaften sollten am besten schon vorher gegeben sein
$(hoverBox).css({
'display': 'none',
'opacity': 0
});
// Funktionen zum Ein- und Ausblenden der Box
function showBox() {
$(hoverBox).show().animate({ 'opacity': 1 });
}
function hideBox() {
$(hoverBox).animate({ 'opacity': 0, 'display': 'none' });
}
// On-Events
$(hoverBox).on('mouseleave', function() {
timer = setTimeout(function() { hideBox(); }, hideInterval);
}).on('mouseover', function() {
clearTimeout(timer);
});
$(hoverLink).on('mouseover', function() {
showBox();
clearTimeout(timer);
}).on('mouseleave', function() {
timer = setTimeout(function() { hideBox(); }, hideInterval);
});
});
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment