How to Fix the Bouncing Menu in jQuery
The jQuery JavaScript framework's user interface plugin allows a Web developer to apply special effects to website elements such a menu items. This includes a bounce effect. The effect accepts arguments that determine how many times the effect will appear to bounce, in what direction it will bounce, the distance that it will bounce and for how long the bouncing action will last. The Web developer may troubleshoot this effect by experimenting with these arguments.
Other People Are Reading
Instructions
-
-
1
Change the directional setting. The directional setting argument controls the directional appearance of the bouncing effect. The argument accepts a string setting of left, right, up or down. Look at these two examples. In the first example, the menu bounces to the right. In the second, the menu bounces to the left. Changing the direction of the bouncing action may provide a quick fix to the menu's alignment-oriented appearance issues.
$('#menu).click(function () {
$(this).effect("bounce", { direction:'right'}, 300);
});
$('#menu).click(function () {
$(this).effect("bounce", { direction:'left'}, 300);
});
-
2
Change the number of bouncing actions. The times argument controls the number of times that the object bounces. This argument allows you to troubleshoot appearance issues when the element bounces too many times. Consider the following two examples. In the first example, the menu item bounces 10 times. In the second example, the menu item has been limited to just three bouncing actions.
$('#menu').click(function () {
$(this).effect("bounce", { times:10 }, 300);
});
$('#menu').click(function () {
$(this).effect("bounce", { times:3 }, 300);
});
-
-
3
Edit the distance argument. The distance argument dictates how far the element bounces. A menu item that bounces too far may make the menu appear unaligned. This example demonstrates a menu item that would bounce 90 pixels to the right.
$('#menu).click(function () {
$(this).effect("bounce", { distance:90 }, 300);
});
-
4
Check the mode setting. The mode argument controls what the menu element does after the effect. This argument accepts three different string settings. The mode can be set to show, hide or effect. Look at this example. The mode setting has been set to hide. This means that the element will disappear when it finishes bouncing. As you might imagine, this could create a significant problem with the appearance of the menu.
$('#menu).click(function () {
$(this).effect("bounce", { mode:'hide'}, 300);
});
-
5
Change the time setting. This value governs the amount of time during which the element will bounce. In all of the previous examples, the time setting has remained at three seconds. In this example, you will notice that the setting has been changed to six seconds. Calibrating the time implementation may affect the appearance of the menu element as it interrelates with other elements.
$('#menu).click(function () {
$(this).effect("bounce", { direction:'right'}, 600);
});
-
1
References
- Photo Credit Comstock/Comstock/Getty Images
