Adding animation to this jQuery script

Question

Have a fairly simple show/hide script for a set of data filters from a button. I've been looking at solutions on how to animate the transition but can't seem to see how this script differs from what's described on the jQuery site.

I read somewhere else that CSS3 animations might be easier or better but that also remains a mystery to me.

Is there an easy modification to this script:

$('.toggle').click(function (event) {
    event.preventDefault();
    var target = $(this).attr('href');
    $(target).toggleClass('hidden show');
});

What kind of animation are you wanting? fade/slide down/slide right? — Taplar
– Taplar, Commented Feb 25, 2016 at 16:21
Oops on the error, left over from messing around, thanks. Just a slide down animation. Very curious to see how this is done. — kylebellamy
– kylebellamy, Commented Feb 25, 2016 at 16:27

fdomn-m · Accepted Answer · 2016-02-25 16:34:50Z

1

Instead of changing the classes, you can use the built-in toggleX methods (eg toggle() and slideToggle()).

If you want to do something more fancy such as animating colours, you'll need to look at the animate method and possibly including jquery-ui, which is where css3 transitions may be easier / less overhead unless you're already including jquery-ui.

$("#toggle").click(function() {
    $("#target").toggle(500);
});

$("#slide").click(function() {
    $("#target").slideToggle(500);
});

Basic fiddle: https://jsfiddle.net/t2j03v6d/

answered Feb 25, 2016 at 16:34

fdomn-m

28.8k8 gold badges39 silver badges70 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

kylebellamy Over a year ago

I knew it had to be something simple but I was just not finding the right page to understand it. Thanks!

Taplar · Accepted Answer · 2016-02-25 16:36:07Z

1

$('.target').on( 'click', function () {
  var $stuff = $(this).find('.stuff');
  
  if ( $stuff.is(':visible') ) {
    $stuff.slideUp('slow');
  } else {
    $stuff.slideDown('slow');
  }
});

.target .stuff {
  display: none;
  
  height: 400px;
  background-color: #F00;
}

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

<ul>
  <li class="target">
    Show/Hide
    <div class="stuff"></div>
  </li>
</ul>

answered Feb 25, 2016 at 16:36

Taplar

25k4 gold badges24 silver badges36 bronze badges

2 Comments

fdomn-m Over a year ago

Please provide an explanation / commentary with your answer, not just code.

kylebellamy Over a year ago

Excellent! Thanks for providing the CSS version of it. Wish there were multiple right answer checks for this.

David Wilkinson · Accepted Answer · 2016-02-25 16:36:26Z

1

I'm not sure what animation you're looking for but here I've used slideToggle() (http://api.jquery.com/slidetoggle/) using some of the code you've provided: https://jsfiddle.net/8gavvmnL/1/

HTML:

<a class="toggle" href="#pop">Click Me</a>
<div id="pop">
  I'm hidden until the button is clicked!
</div>

jQuery:

$("#pop").hide();
$('.toggle').click(function (event) {
    event.preventDefault();
    var target = $(this).attr('href');
    $(target).slideToggle();
});

edited Feb 25, 2016 at 16:36

answered Feb 25, 2016 at 16:34

David Wilkinson

5,1281 gold badge21 silver badges32 bronze badges

1 Comment

fdomn-m Over a year ago

Change slideDown() to slideToggle() for a better match with the requirement / OPs code

Collectives™ on Stack Overflow

Adding animation to this jQuery script

3 Answers 3

1 Comment

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related