Jquery animation problems and concerns

Question

I am having an issue getting my divs to animate when I close them. Any help as to why it's not would be helpful.

$(function() {
  $('a[href*=#]:not([href=#])').click(function() {
    if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {

      var target = $(this.hash);
      target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
      if (target.length) {
        $('html,body').animate({
          scrollTop: target.offset().top
        }, 1000);
        return false;
      }
    }
  });
});

$(document).ready(function() {

    $('.bar1').click(function() {
        $('#full1').toggleClass('open', 900);
    });
    $('.bar2').click(function() {
        $('#full2').toggleClass('open', 900);
    });
    $('.bar3').click(function() {
        $('#full3').toggleClass('open', 900);
    });   
    $('.bar4').click(function() {
        $('#full4').toggleClass('open', 900);
    });   
});

When I close the div I don't understand why this doesnt animate — riotgear, Feb 11 '14 at 19:47

score 1 · Answer 1 · edited May 23 '17 at 11:57

1

If I understand your question, your problem is toggleClass does not do animation. You should use jQuery's switchClass.

This question may also be helpful.

edited May 23 '17 at 11:57

Community

1
1

answered Feb 11 '14 at 19:58

jlars62

7,183
7
39
60

I believe switchClass() would also require a class being added initially to the trigger, such as "open", then passed as `$(something).switchClass('open','closed')`. You can also pass duration and easing as arguments. – Dpeif Feb 11 '14 at 20:08

Yeronimo · Answer 2 · 2014-02-13T08:27:47.137

0

Besides switchClass, you could also use toggle(). See this fiddle: http://jsfiddle.net/7U9QY/2/

Simply change toggleClass to toggle(600)

$(document).ready(function() {
    $('.bar').click(function() {
        $('.full').toggle(600);
});

OK if you want only the clicked div you could use this: http://jsfiddle.net/7U9QY/8/

 $(this).closest('a').siblings('div').toggle(600);

So find the closest a and then in the siblings the div. Another solution would be:

 $(this).parent().parent().children('.full').toggle(600);

edited Feb 13 '14 at 08:27

answered Feb 11 '14 at 20:05

Yeronimo

1,731
15
28

This is an awesome solution. The only thing I don't understand is how to make each div open independantly. – riotgear Feb 11 '14 at 20:29

Jquery animation problems and concerns

2 Answers2