Below is a html code for which give slidetoggle effect with startstop.js .
<html>
<head><title>slidetoggle with jquery example</title></head>
<body>
<p><input type="button" id="start_btn" value="slide start" />
<input type="button" id="stop_btn" value="stop" /></p>
<img id="image" src="img/school.png" height="400px" width="500px"/>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="startstop.js"></script>
</body>
</html>
Below is a jquery code for stopping the toggle effect.
//startstop.js
$('#start_btn').click(function(){
$('#image').slideToggle(5000);
});
$('#stop_btn').click(function(){
$('#image').stop();
});
<html>
<head><title>slidetoggle with jquery example</title></head>
<body>
<p><input type="button" id="start_btn" value="slide start" />
<input type="button" id="stop_btn" value="stop" /></p>
<img id="image" src="img/school.png" height="400px" width="500px"/>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="startstop.js"></script>
</body>
</html>
Below is a jquery code for stopping the toggle effect.
//startstop.js
$('#start_btn').click(function(){
$('#image').slideToggle(5000);
});
$('#stop_btn').click(function(){
$('#image').stop();
});
 |
| fig : output of above code |
No comments:
Post a Comment