CODEWITHSUNDEEP
jquery
Perelan
Perelan

Reputation: 406

How do I handle the Start Event for SlideToggle?

I'm reading the documentation for slidetoggle, and I can see there's an event for start event: http://api.jquery.com/slidetoggle/ - but I can't seem to find a way to use this. Any assisting hand on this matter?

Much appreciated!

Upvotes: 1

Views: 2623

Answers (2)

Perelan
Perelan

Reputation: 406

Many thanks for the help.

The correct way to do this is:

$('div').slideToggle({
   duration: 800,
   start: function(){
      console.log('start anim')
   },
   done: function() {
      console.log('end anim')
   }
})

Credits @A. Wolff

Upvotes: 4

caldera.sac
caldera.sac

Reputation: 5088

this is an example of using slide toggle

<html>
<head></head>
<title></title>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<style>

div#mydiv
{
	width: 400px;
	height: 400px;
	background-color: orange;
	display: none;
}
</style>

<body>

<h3>This is how slideToggle works</h3>
<button id="mybutton">SlideDown OR SlideUp</button>
<div id='mydiv'></div>



<script type="text/javascript">

$("#mybutton").click(function(){
	$("#mydiv").slideToggle(1000);
});





</script>
</body>

</html>

Explanation

actually what slideToggle does is it does the both slideUp and slideDown together. if the div or any other element is in slideUp mode it does slidDown or else if the the div is in slideDown mode it does slideUp. basically if you do not use this slideToggle, you have to write two functions to slideUp and slideDown or you have to use a callback funtion to do it.so this make easy to do us these type things.

hope this will help to you.

Upvotes: 0

Related Questions