LIDOR SYSTEMS

Advanced User Interface Controls and Components

IntegralUI Web

Documentation and API Reference


startAnimation()

Starts the animation of slides in SlideBar widget.

Parameters

This method doesn't have any parameters.

Remarks

The animation will start only if allowAnimation property value is set to true.

Return Value

This method does not return a value.

Version Information

Supported in: v1.0.

Example

In this example we are showing how to start animation of slides. Each slide will have animated movement of its position from right to left. Duration of animation depends on the value of animationSpeed property.

The anima

$(document).ready(function() {

// Create an instance of SlideBar widget

var $bar = $('#slidebar').slidebar({

slideWidth: 300,

slideHeight: 200

});

 

// Start the animation

$bar.slidebar("startAnimation");

});

<!DOCTYPE html>

<html>

<head>

<link rel="stylesheet" href="css/integralui.slidebar.css" />

<link rel="stylesheet" href="css/themes/theme-blue.css" />

<script type="text/javascript" src="external/jquery-1.9.1.min.js"></script>

<script type="text/javascript" src="external/jquery.ui.core.min.js"></script>

<script type="text/javascript" src="external/jquery.ui.widget.min.js"></script>

<script type="text/javascript" src="js/jquery.integralui.widget.min.js"></script>

<script type="text/javascript" src="js/jquery.integralui.slidebar.min.js"></script>

</head>

<body>

<div id="slidebar" class="widget">

<div>

<ul>

<li><div class="slide"><span>Slide 1</span></div></li>

<li><div class="slide"><span>Slide 2</span></div></li>

<li><div class="slide"><span>Slide 3</span></div></li>

</ul>

</div>

</div>

</body>

</html>

.widget

{

width: 300px;

height: 200px;

}

.slide

{

width: 300px;

height: 200px;

text-align: center;

}

.slide span

{

display: inline-block;

font-size: 2em;

margin: 25% auto;

vertical-align: middle;

}

Samples

See Also