JQuery toggle class plus animation

Question

i have this code but don't know why the 'toggleClass' instruction doesn't work. can someone give me any tips? http://jsfiddle.net/dW6Mb/16/. Thank you

$(document).ready(function () {
$('#admin > p').click(function () {
    $(this).toggleClass('adminPvisible');
    var right = $('#admin > p').css('right') == '135px' ? '0' : '135px';
    $('#admin > p').animate({
        right: right,
        width: '50px'
    });
    $('#admin > form, #btn').stop(true).slideToggle();        
})

})

You can just specify `width: 50` instead of `width: '50px'`: jQuery deals with this for you. — James Donnelly, Feb 27 '14 at 10:34

score 1 · Accepted Answer · answered Feb 27 '14 at 10:27

1

because of css specificity

#admin .adminPvisible {
    opacity:1;
}

Demo: Fiddle

You have a rule #admin p which is setting the opacity to .3 and then you are assigning the class adminPvisible(with opacity 1) to the p element, but since the id rule has more weight it is overriding the class rule

answered Feb 27 '14 at 10:27

Arun P Johny

384,651
66
527
531

Thanks, i could overcome this problem with the '!important' in css class. Thank you, i understood what you mean now. – Miguel Feb 27 '14 at 10:49
@Miguel see http://stackoverflow.com/questions/3706819/what-are-the-implications-of-using-important-in-css – Arun P Johny Feb 27 '14 at 11:01

JQuery toggle class plus animation

1 Answers1