Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

What is the difference between Toggle and slideToggle in jQuery?

Tags:

html

jquery

<script type="text/javascript">
$("document").ready(function() {
 $("button").click(function() {
 $("[src$='.jpg']").slideToggle(1000);
  })
  }
)
</script>
<img src="http://images2.wikia.nocookie.net/__cb20101129232634/callofduty/images/2/2e/Pripyat.jpg">
<button>Click me</button>

is same like

<script type="text/javascript">
$("document").ready(function() {
 $("button").click(function() {
 $("img [src$='.jpg']").toggle(1000);
  })
  }
)
</script>
<img src="http://images2.wikia.nocookie.net/__cb20101129232634/callofduty/images/2/2e/Pripyat.jpg">
<button>Click me</button>

So is there really any difference?

like image 451
Praateek.com Avatar asked Dec 28 '22 04:12

Praateek.com


2 Answers

It should be pointed out however that there is a difference in the animation, albeit a small one: .toggle() will slide the element from the top left corner, whereas .slideToggle will slide it from top to bottom.

You can see an example for both effects on this fiddle.

like image 87
Ana Ameer Avatar answered Jan 19 '23 00:01

Ana Ameer


.toggle():

Display or hide the matched elements.

.slideToggle():

Display or hide the matched elements with a sliding motion.


With your usage, you will not see a difference.

The jQuery documentation site is very good and should be the first place to look for this kind of question.

like image 21
Oded Avatar answered Jan 19 '23 01:01

Oded