Cannot change values for two css elements

Question

I have this piece of code

$(function(){
var padding1 = [1,15];
var fontSize = [18,23];


  var changeNavState = function(newStateIndex) {
    $("nav ul li a").data('state', newStateIndex).stop().animate({
        padding : padding1 [newStateIndex] + 'px'
    }, 300); 
    $("nav ul li a").data('state', newStateIndex).stop().animate({
        fontSize : fontSize [newStateIndex] + 'px'
    }, 300); 

  };

  var boolToStateIndex = function(bool) {
    return bool * 1;    
  };

  var maybeChangeNavState = function(condState) {
    var navState = $("nav ul li a").data('state');
    if (navState === condState) {
      changeNavState(boolToStateIndex(!navState));
    }

  };

  $('nav ul li a').data('state', 1);

  $(window).scroll(
      function(){
        if ($(document).scrollTop() > $('#home').offset().top - $('nav').height()) {
          maybeChangeNavState(1);
        } else {
          maybeChangeNavState(0); 
        }
     }
  );
}

);

So when the user scrolls greater than hight of 'home' then the navbar padding should be 1 and font size 18 and when its minor padding should be 15 and fontSize 23. The problem is that it works only for fontSize BUT if i erase fontSize code the padding works.. Does anyone knows what is going on ? Thanks!

Sworrub Wehttam · Accepted Answer · 2015-12-14 13:33:43Z

1

Not sure if this is the reason or not... but I would change your animation code to:

$("nav ul li a").data('state', newStateIndex).stop().animate({
    padding : padding1 [newStateIndex] + 'px',
    fontSize : fontSize [newStateIndex] + 'px'
}, 300);

Combining the two together. Perhaps the two are conflicting?

answered Dec 14, 2015 at 13:33

Sworrub Wehttam

5984 silver badges14 bronze badges

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

2 Comments

Iraklis Bekiaris Over a year ago

Thanks bro! That was the problem.. Silly me for not seing that. Cheers. I will tick when i can ;d

Sworrub Wehttam Over a year ago

Also, if this was me, I would opt for a css solution: nav ul li a { transition: all 0.3s; }

Collectives™ on Stack Overflow

Cannot change values for two css elements

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related