Jquery Toggle .CSS not working

Question

I am trying to change the .css property so that the css transitions will animate on click. For some reason this is not working. This action needs to toggle.

 $("button.subnav-toggle").click(function(){              
          $(".subnav").toggle(
            function() {
              $(".subnav").css({'top':'0'});
              alert("something");
            }, function() {
              $(".subnav").css({'top':'-150px'});
          })
        });

How is it not working? What do you expect it to do and what does it actually do? — Dave Zych
– Dave Zych, Commented Apr 14, 2014 at 18:41
The expected action is to change the .css from 0 to -150 and back. I am using the transition property in CSS3 so that every time the "top" position changes the div.subnav will animate up and down. — user3328590
– user3328590, Commented Apr 14, 2014 at 18:48

Bradley · Accepted Answer · 2014-04-14 18:53:49Z

2

how about toggling a class with these positions?

edited Apr 14, 2014 at 18:53

answered Apr 14, 2014 at 18:43

Bradley

4903 silver badges10 bronze badges

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

4 Comments

Bradley Over a year ago

Something like $(".subnav").toggleClass(theclass); and assign it the top value your looking for on the first click. -150px?

Bradley Over a year ago

Yes it will, just make sure you have the transition calls set up on your subnav class and it should animate, you may have make the top attribute important on the class your toggling to override the other classes top attribute. Let me know if it works for you.

user3328590 Over a year ago

That sounds perfect. I will try this.

Bradley Over a year ago

Don't forget to notify us as to which answer worked for you when you figure it out.

Faust · Accepted Answer · 2014-04-14 20:05:07Z

1

.toggle won't do a transition. You could use .animate though:

~~$("button.subnav-toggle").click(function(){ $(this).animate({top:'-150px'}) });~~

Revision:

$("button.subnav-toggle").click(function(){  

    var top = $(this).css('top');
    var topTo = (top == 'auto' || top == '0px') ? '-150px' : '0px';
    $(this).css('top', topTo)
});

Fiddled here: http://jsfiddle.net/mhfaust/K5hEb/

edited Apr 14, 2014 at 20:05

answered Apr 14, 2014 at 18:44

Faust

15.5k10 gold badges58 silver badges116 bronze badges

2 Comments

user3328590 Over a year ago

I need too toggle between two positions because it is a dropdown menu i am trying to animate. The position depends on the click of one button.

Faust Over a year ago

Revised according to this clarification.

RGS · Accepted Answer · 2014-04-14 18:46:26Z

0

$(document).ready(function () {
    $('button.subnav-toggle').click(function () {
        var visible = $('.subnav').is(":visible");
        $('.subnav').slideToggle(500);
        if (!visible) {
            $('html, body').animate({
                scrollTop: $('.subnav').offset().top
            }, 500);
        }
    });
});

answered Apr 14, 2014 at 18:46

RGS

5,2217 gold badges44 silver badges69 bronze badges

Collectives™ on Stack Overflow

Jquery Toggle .CSS not working

3 Answers 3

4 Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related