| Widgets > wijsuperpanel > wijsuperpanel How To > Set Animation Options |
To set the animationOptions to see animation when you are scrolling the panel, use the following code:
<style type="text/css">
.elements ul
{
padding: 8px 0 0 8px;
margin: 0px;
width: 840px;
float: left;
position: relative;
zoom: 1;
}
.elements ul li
{
background: #fff;
color: #fff;
font-weight: 900;
height: 70px;
margin: 0 8px 8px 0;
padding: 0;
padding-top: 62px;
position: relative;
text-align: center;
width: 132px;
text-shadow: 1px 1px 2px #000000;
}
.elements li
{
float: left;
list-style: none;
}
</style>
<script id="scriptInit" type="text/javascript">
$(document).ready(function () {
// put all your jQuery goodness in here.
$('#superPanel').wijsuperpanel();
});
function changeProperties() {
var animationOptions = {
queue: $('#chkQueue').val(),
easing: $('#selEasing').val()
};
$('#superPanel').wijsuperpanel({ animationOptions: animationOptions });
}
</script>
}
<h2>
Overview</h2>
<div class="main demo">
<!-- Begin demo markup -->
<div id="superPanel" style="width: 754px; height: 300px;">
<div class="elements">
<ul>
<li style="background: none repeat scroll 0% 0% activeborder;"><span>ActiveBorder</span>
</li>
<li style="background: none repeat scroll 0% 0% activecaption;"><span>ActiveCaption</span>
</li>
<li style="background: none repeat scroll 0% 0% captiontext;"><span>ActiveCaptionText</span>
</li>
<li style="background: none repeat scroll 0% 0% appworkspace;"><span>AppWorkspace</span>
</li>
<li style="background: none repeat scroll 0% 0% buttonface;"><span>Control</span>
</li>
<li style="background: none repeat scroll 0% 0% buttonshadow;"><span>ControlDark</span>
</li>
<li style="background: none repeat scroll 0% 0% threeddarkshadow;"><span>ControlDarkDark</span>
</li>
<li style="background: none repeat scroll 0% 0% buttonface;"><span>ControlLight</span>
</li>
<li style="background: none repeat scroll 0% 0% buttonhighlight;"><span>ControlLightLight</span>
</li>
<li style="background: none repeat scroll 0% 0% buttontext;"><span>ControlText</span>
</li>
<li style="background: none repeat scroll 0% 0% background;"><span>Desktop</span>
</li>
<li style="background: none repeat scroll 0% 0% graytext;"><span>GrayText</span>
</li>
<li style="background: none repeat scroll 0% 0% highlight;"><span>Highlight</span>
</li>
<li style="background: none repeat scroll 0% 0% highlighttext;"><span>HighlightText</span>
</li>
<li style="background: none repeat scroll 0% 0% highlight;"><span>HotTrack</span>
</li>
<li style="background: none repeat scroll 0% 0% inactiveborder;"><span>InactiveBorder</span>
</li>
<li style="background: none repeat scroll 0% 0% inactivecaption;"><span>InactiveCaption</span>
</li>
<li style="background: none repeat scroll 0% 0% inactivecaptiontext;"><span>InactiveCaptionText</span>
</li>
<li style="background: none repeat scroll 0% 0% infobackground;"><span>Info</span>
</li>
<li style="background: none repeat scroll 0% 0% infotext;"><span>InfoText</span>
</li>
<li style="background: none repeat scroll 0% 0% menu;"><span>Menu</span> </li>
<li style="background: none repeat scroll 0% 0% menutext;"><span>MenuText</span>
</li>
<li style="background: none repeat scroll 0% 0% scrollbar;"><span>ScrollBar</span>
</li>
<li style="background: none repeat scroll 0% 0% window;"><span>Window</span> </li>
<li style="background: none repeat scroll 0% 0% windowframe;"><span>WindowFrame</span>
</li>
<li style="background: none repeat scroll 0% 0% windowtext;"><span>WindowText</span>
</li>
<li style="background: none repeat scroll 0% 0% Transparent;"><span>Transparent</span>
</li>
<li style="background: none repeat scroll 0% 0% AliceBlue;"><span>AliceBlue</span>
</li>
<li style="background: none repeat scroll 0% 0% AntiqueWhite;"><span>AntiqueWhite</span>
</li>
<li style="background: none repeat scroll 0% 0% Aqua;"><span>Aqua</span> </li>
<li style="background: none repeat scroll 0% 0% Aquamarine;"><span>Aquamarine</span>
</li>
<li style="background: none repeat scroll 0% 0% Azure;"><span>Azure</span> </li>
<li style="background: none repeat scroll 0% 0% Beige;"><span>Beige</span> </li>
<li style="background: none repeat scroll 0% 0% Bisque;"><span>Bisque</span> </li>
<li style="background: none repeat scroll 0% 0% Black;"><span>Black</span> </li>
<li style="background: none repeat scroll 0% 0% BlanchedAlmond;"><span>BlanchedAlmond</span>
</li>
<li style="background: none repeat scroll 0% 0% Blue;"><span>Blue</span> </li>
<li style="background: none repeat scroll 0% 0% BlueViolet;"><span>BlueViolet</span>
</li>
<li style="background: none repeat scroll 0% 0% Brown;"><span>Brown</span> </li>
<li style="background: none repeat scroll 0% 0% BurlyWood;"><span>BurlyWood</span>
</li>
<li style="background: none repeat scroll 0% 0% CadetBlue;"><span>CadetBlue</span>
</li>
<li style="background: none repeat scroll 0% 0% Chartreuse;"><span>Chartreuse</span>
</li>
<li style="background: none repeat scroll 0% 0% Chocolate;"><span>Chocolate</span>
</li>
<li style="background: none repeat scroll 0% 0% Coral;"><span>Coral</span> </li>
<li style="background: none repeat scroll 0% 0% CornflowerBlue;"><span>CornflowerBlue</span>
</li>
<li style="background: none repeat scroll 0% 0% Cornsilk;"><span>Cornsilk</span>
</li>
<li style="background: none repeat scroll 0% 0% Crimson;"><span>Crimson</span> </li>
<li style="background: none repeat scroll 0% 0% Cyan;"><span>Cyan</span> </li>
<li style="background: none repeat scroll 0% 0% DarkBlue;"><span>DarkBlue</span>
</li>
<li style="background: none repeat scroll 0% 0% DarkCyan;"><span>DarkCyan</span>
</li>
<li style="background: none repeat scroll 0% 0% DarkGoldenrod;"><span>DarkGoldenrod</span>
</li>
<li style="background: none repeat scroll 0% 0% DarkGray;"><span>DarkGray</span>
</li>
<li style="background: none repeat scroll 0% 0% DarkGreen;"><span>DarkGreen</span>
</li>
<li style="background: none repeat scroll 0% 0% DarkKhaki;"><span>DarkKhaki</span>
</li>
<li style="background: none repeat scroll 0% 0% DarkMagenta;"><span>DarkMagenta</span>
</li>
<li style="background: none repeat scroll 0% 0% DarkOliveGreen;"><span>DarkOliveGreen</span>
</li>
<li style="background: none repeat scroll 0% 0% DarkOrange;"><span>DarkOrange</span>
</li>
<li style="background: none repeat scroll 0% 0% DarkOrchid;"><span>DarkOrchid</span>
</li>
<li style="background: none repeat scroll 0% 0% DarkRed;"><span>DarkRed</span> </li>
<li style="background: none repeat scroll 0% 0% DarkSalmon;"><span>DarkSalmon</span>
</li>
<li style="background: none repeat scroll 0% 0% DarkSeaGreen;"><span>DarkSeaGreen</span>
</li>
<li style="background: none repeat scroll 0% 0% DarkSlateBlue;"><span>DarkSlateBlue</span>
</li>
<li style="background: none repeat scroll 0% 0% DarkSlateGray;"><span>DarkSlateGray</span>
</li>
<li style="background: none repeat scroll 0% 0% DarkTurquoise;"><span>DarkTurquoise</span>
</li>
<li style="background: none repeat scroll 0% 0% DarkViolet;"><span>DarkViolet</span>
</li>
<li style="background: none repeat scroll 0% 0% DeepPink;"><span>DeepPink</span>
</li>
<li style="background: none repeat scroll 0% 0% DeepSkyBlue;"><span>DeepSkyBlue</span>
</li>
<li style="background: none repeat scroll 0% 0% DimGray;"><span>DimGray</span> </li>
<li style="background: none repeat scroll 0% 0% DodgerBlue;"><span>DodgerBlue</span>
</li>
<li style="background: none repeat scroll 0% 0% Firebrick;"><span>Firebrick</span>
</li>
<li style="background: none repeat scroll 0% 0% FloralWhite;"><span>FloralWhite</span>
</li>
<li style="background: none repeat scroll 0% 0% ForestGreen;"><span>ForestGreen</span>
</li>
<li style="background: none repeat scroll 0% 0% Fuchsia;"><span>Fuchsia</span> </li>
<li style="background: none repeat scroll 0% 0% Gainsboro;"><span>Gainsboro</span>
</li>
<li style="background: none repeat scroll 0% 0% GhostWhite;"><span>GhostWhite</span>
</li>
<li style="background: none repeat scroll 0% 0% Gold;"><span>Gold</span> </li>
<li style="background: none repeat scroll 0% 0% Goldenrod;"><span>Goldenrod</span>
</li>
<li style="background: none repeat scroll 0% 0% Gray;"><span>Gray</span> </li>
<li style="background: none repeat scroll 0% 0% Green;"><span>Green</span> </li>
<li style="background: none repeat scroll 0% 0% GreenYellow;"><span>GreenYellow</span>
</li>
<li style="background: none repeat scroll 0% 0% Honeydew;"><span>Honeydew</span>
</li>
<li style="background: none repeat scroll 0% 0% HotPink;"><span>HotPink</span> </li>
<li style="background: none repeat scroll 0% 0% IndianRed;"><span>IndianRed</span>
</li>
<li style="background: none repeat scroll 0% 0% Indigo;"><span>Indigo</span> </li>
<li style="background: none repeat scroll 0% 0% Ivory;"><span>Ivory</span> </li>
<li style="background: none repeat scroll 0% 0% Khaki;"><span>Khaki</span> </li>
<li style="background: none repeat scroll 0% 0% Lavender;"><span>Lavender</span>
</li>
<li style="background: none repeat scroll 0% 0% LavenderBlush;"><span>LavenderBlush</span>
</li>
<li style="background: none repeat scroll 0% 0% LawnGreen;"><span>LawnGreen</span>
</li>
<li style="background: none repeat scroll 0% 0% LemonChiffon;"><span>LemonChiffon</span>
</li>
<li style="background: none repeat scroll 0% 0% LightBlue;"><span>LightBlue</span>
</li>
<li style="background: none repeat scroll 0% 0% LightCoral;"><span>LightCoral</span>
</li>
<li style="background: none repeat scroll 0% 0% LightCyan;"><span>LightCyan</span>
</li>
<li style="background: none repeat scroll 0% 0% LightGoldenrodYellow;"><span>LightGoldenrodYellow</span>
</li>
<li style="background: none repeat scroll 0% 0% LightGrey;"><span>LightGray</span>
</li>
<li style="background: none repeat scroll 0% 0% LightGreen;"><span>LightGreen</span>
</li>
<li style="background: none repeat scroll 0% 0% LightPink;"><span>LightPink</span>
</li>
<li style="background: none repeat scroll 0% 0% LightSalmon;"><span>LightSalmon</span>
</li>
<li style="background: none repeat scroll 0% 0% LightSeaGreen;"><span>LightSeaGreen</span>
</li>
<li style="background: none repeat scroll 0% 0% LightSkyBlue;"><span>LightSkyBlue</span>
</li>
<li style="background: none repeat scroll 0% 0% LightSlateGray;"><span>LightSlateGray</span>
</li>
<li style="background: none repeat scroll 0% 0% LightSteelBlue;"><span>LightSteelBlue</span>
</li>
<li style="background: none repeat scroll 0% 0% LightYellow;"><span>LightYellow</span>
</li>
<li style="background: none repeat scroll 0% 0% Lime;"><span>Lime</span> </li>
<li style="background: none repeat scroll 0% 0% LimeGreen;"><span>LimeGreen</span>
</li>
<li style="background: none repeat scroll 0% 0% Linen;"><span>Linen</span> </li>
<li style="background: none repeat scroll 0% 0% Magenta;"><span>Magenta</span> </li>
<li style="background: none repeat scroll 0% 0% Maroon;"><span>Maroon</span> </li>
<li style="background: none repeat scroll 0% 0% MediumAquamarine;"><span>MediumAquamarine</span>
</li>
<li style="background: none repeat scroll 0% 0% MediumBlue;"><span>MediumBlue</span>
</li>
<li style="background: none repeat scroll 0% 0% MediumOrchid;"><span>MediumOrchid</span>
</li>
<li style="background: none repeat scroll 0% 0% MediumPurple;"><span>MediumPurple</span>
</li>
<li style="background: none repeat scroll 0% 0% MediumSeaGreen;"><span>MediumSeaGreen</span>
</li>
<li style="background: none repeat scroll 0% 0% MediumSlateBlue;"><span>MediumSlateBlue</span>
</li>
<li style="background: none repeat scroll 0% 0% MediumSpringGreen;"><span>MediumSpringGreen</span>
</li>
<li style="background: none repeat scroll 0% 0% MediumTurquoise;"><span>MediumTurquoise</span>
</li>
<li style="background: none repeat scroll 0% 0% MediumVioletRed;"><span>MediumVioletRed</span>
</li>
<li style="background: none repeat scroll 0% 0% MidnightBlue;"><span>MidnightBlue</span>
</li>
<li style="background: none repeat scroll 0% 0% MintCream;"><span>MintCream</span>
</li>
<li style="background: none repeat scroll 0% 0% MistyRose;"><span>MistyRose</span>
</li>
<li style="background: none repeat scroll 0% 0% Moccasin;"><span>Moccasin</span>
</li>
<li style="background: none repeat scroll 0% 0% NavajoWhite;"><span>NavajoWhite</span>
</li>
<li style="background: none repeat scroll 0% 0% Navy;"><span>Navy</span> </li>
<li style="background: none repeat scroll 0% 0% OldLace;"><span>OldLace</span> </li>
<li style="background: none repeat scroll 0% 0% Olive;"><span>Olive</span> </li>
<li style="background: none repeat scroll 0% 0% OliveDrab;"><span>OliveDrab</span>
</li>
<li style="background: none repeat scroll 0% 0% Orange;"><span>Orange</span> </li>
<li style="background: none repeat scroll 0% 0% OrangeRed;"><span>OrangeRed</span>
</li>
<li style="background: none repeat scroll 0% 0% Orchid;"><span>Orchid</span> </li>
<li style="background: none repeat scroll 0% 0% PaleGoldenrod;"><span>PaleGoldenrod</span>
</li>
<li style="background: none repeat scroll 0% 0% PaleGreen;"><span>PaleGreen</span>
</li>
<li style="background: none repeat scroll 0% 0% PaleTurquoise;"><span>PaleTurquoise</span>
</li>
<li style="background: none repeat scroll 0% 0% PaleVioletRed;"><span>PaleVioletRed</span>
</li>
<li style="background: none repeat scroll 0% 0% PapayaWhip;"><span>PapayaWhip</span>
</li>
<li style="background: none repeat scroll 0% 0% PeachPuff;"><span>PeachPuff</span>
</li>
<li style="background: none repeat scroll 0% 0% Peru;"><span>Peru</span> </li>
<li style="background: none repeat scroll 0% 0% Pink;"><span>Pink</span> </li>
<li style="background: none repeat scroll 0% 0% Plum;"><span>Plum</span> </li>
<li style="background: none repeat scroll 0% 0% PowderBlue;"><span>PowderBlue</span>
</li>
<li style="background: none repeat scroll 0% 0% Purple;"><span>Purple</span> </li>
<li style="background: none repeat scroll 0% 0% Red;"><span>Red</span> </li>
<li style="background: none repeat scroll 0% 0% RosyBrown;"><span>RosyBrown</span>
</li>
<li style="background: none repeat scroll 0% 0% RoyalBlue;"><span>RoyalBlue</span>
</li>
<li style="background: none repeat scroll 0% 0% SaddleBrown;"><span>SaddleBrown</span>
</li>
<li style="background: none repeat scroll 0% 0% Salmon;"><span>Salmon</span> </li>
<li style="background: none repeat scroll 0% 0% SandyBrown;"><span>SandyBrown</span>
</li>
<li style="background: none repeat scroll 0% 0% SeaGreen;"><span>SeaGreen</span>
</li>
<li style="background: none repeat scroll 0% 0% SeaShell;"><span>SeaShell</span>
</li>
<li style="background: none repeat scroll 0% 0% Sienna;"><span>Sienna</span> </li>
<li style="background: none repeat scroll 0% 0% Silver;"><span>Silver</span> </li>
<li style="background: none repeat scroll 0% 0% SkyBlue;"><span>SkyBlue</span> </li>
<li style="background: none repeat scroll 0% 0% SlateBlue;"><span>SlateBlue</span>
</li>
<li style="background: none repeat scroll 0% 0% SlateGray;"><span>SlateGray</span>
</li>
<li style="background: none repeat scroll 0% 0% Snow;"><span>Snow</span> </li>
<li style="background: none repeat scroll 0% 0% SpringGreen;"><span>SpringGreen</span>
</li>
<li style="background: none repeat scroll 0% 0% SteelBlue;"><span>SteelBlue</span>
</li>
<li style="background: none repeat scroll 0% 0% Tan;"><span>Tan</span> </li>
<li style="background: none repeat scroll 0% 0% Teal;"><span>Teal</span> </li>
<li style="background: none repeat scroll 0% 0% Thistle;"><span>Thistle</span> </li>
<li style="background: none repeat scroll 0% 0% Tomato;"><span>Tomato</span> </li>
<li style="background: none repeat scroll 0% 0% Turquoise;"><span>Turquoise</span>
</li>
<li style="background: none repeat scroll 0% 0% Violet;"><span>Violet</span> </li>
<li style="background: none repeat scroll 0% 0% Wheat;"><span>Wheat</span> </li>
<li style="background: none repeat scroll 0% 0% White;"><span>White</span> </li>
<li style="background: none repeat scroll 0% 0% WhiteSmoke;"><span>WhiteSmoke</span>
</li>
<li style="background: none repeat scroll 0% 0% Yellow;"><span>Yellow</span> </li>
<li style="background: none repeat scroll 0% 0% YellowGreen;"><span>YellowGreen</span>
</li>
<li style=""><span>ButtonFace</span> </li>
<li style=""><span>ButtonHighlight</span> </li>
<li style=""><span>ButtonShadow</span> </li>
<li style="background: none repeat scroll 0% 0% activecaption;"><span>GradientActiveCaption</span>
</li>
<li style="background: none repeat scroll 0% 0% inactivecaption;"><span>GradientInactiveCaption</span>
</li>
<li style="background: none repeat scroll 0% 0% menu;"><span>MenuBar</span> </li>
<li style="background: none repeat scroll 0% 0% highlighttext;"><span>MenuHighlight</span>
</li>
</ul>
</div>
</div>
<!-- End demo markup -->
<div class="demo-options">
<!-- Begin options markup -->
<div>
<label for="chkQueue">
Animation Settings: Queue
</label>
<input id="chkQueue" type="checkbox" />
<label for="selEasing">
Easing
</label>
<select id="selEasing">
<option value="easeInQuad">easeInQuad</option>
<option value="easeOutQuad">easeOutQuad</option>
<option value="easeInOutQuad">easeInOutQuad</option>
<option value="easeInCubic">easeInCubic</option>
<option value="easeOutCubic">easeOutCubic</option>
<option value="easeInOutCubic">easeInOutCubic</option>
<option value="easeInQuart">easeInQuart</option>
<option value="easeOutQuart">easeOutQuart</option>
<option value="easeInOutQuart">easeInOutQuart</option>
<option value="easeInQuint">easeInQuint</option>
<option value="easeOutQuint">easeOutQuint</option>
<option value="easeInOutQuint">easeInOutQuint</option>
<option value="easeInSine">easeInSine</option>
<option value="easeOutSine">easeOutSine</option>
<option value="easeInOutSine">easeInOutSine</option>
<option value="easeInExpo">easeInExpo</option>
<option value="easeOutExpo">easeOutExpo</option>
<option value="easeInOutExpo">easeInOutExpo</option>
<option value="easeInCirc">easeInCirc</option>
<option value="easeOutCirc">easeOutCirc</option>
<option value="easeInOutCirc">easeInOutCirc</option>
<option value="easeInElastic">easeInElastic</option>
<option value="easeOutElastic">easeOutElastic</option>
<option value="easeInOutElastic">easeInOutElastic</option>
<option value="easeInBack">easeInBack</option>
<option value="easeOutBack">easeOutBack</option>
<option value="easeInOutBack">easeInOutBack</option>
<option value="easeInBounce">easeInBounce</option>
<option value="easeOutBounce">easeOutBounce</option>
<option value="easeInOutBounce">easeInOutBounce</option>
</select>
<input type="button" value="Apply" onclick="changeProperties()" />
</div>
<!-- End options markup -->
</div>
</div>