CODEWITHSUNDEEP
jquery
Roberto Sepúlveda Bravo
Roberto Sepúlveda Bravo

Reputation: 856

JQuery can't change font-size

I need to change font size on hover, i think this doesn't work for me because i'm using bootstrap. This is what i have:

<!DOCTYPE html>
<html>
<head>
<title>Marichihueu</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<link rel="stylesheet"  href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" integrity="sha512-dTfge/zgoMYpP7QbHy4gWMEGsbsdZeCXz7irItjcC3sPUFtf0kuFbDz/ixG7ArTxmDjLXDmezHubeNikyKGVyQ==" crossorigin="anonymous">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js">    </script>
<script>
 $(document).ready(myMain);
  function myMain(){

    $("a").hover(more);

    function more(){
        $(this).animate({font-size:'50px'},"fast");
    }

}
</script>
</head>

<body>
<header>
<div class="container-fluid">
    <h1>TEST</h1>
</div>
</header>

<div class="container">
<div class="row well">
    <div>
        <input type="text" />
    </div>
    <div class="row-fluid">
        <ul class="nav nav-pills">
            <li><a href="#">A</a></li>
            <li><a href="#">B</a></li>
            <li><a href="#">C</a></li>
            <li><a href="#">D</a></li>
            <li><a href="#">E</a></li>
            <li><a href="#">F</a></li>
            <li><a href="#">G</a></li>
            <li><a href="#">H</a></li>
            <li><a href="#">I</a></li>
            <li><a href="#">J</a></li>
            <li><a href="#">K</a></li>
            <li><a href="#">L</a></li>
            <li><a href="#">M</a></li>
            <li><a href="#">N</a></li>
            <li><a href="#">Ñ</a></li>
            <li><a href="#">O</a></li>
            <li><a href="#">P</a></li>
            <li><a href="#">Q</a></li>
            <li><a href="#">R</a></li>
            <li><a href="#">S</a></li>
            <li><a href="#">T</a></li>
            <li><a href="#">U</a></li>
            <li><a href="#">V</a></li>
            <li><a href="#">X</a></li>
            <li><a href="#">Y</a></li>
            <li><a href="#">Z</a></li>
        </ul>
    </div>
</div>
</div>
</body>
</html>

I don't know exactly what is wrong, maybe some bootstrap rule.

Sorry for my bad english.

Upvotes: 2

Views: 641

Answers (2)

guradio
guradio

Reputation: 15555

li a {

  font-size: 16px;

  /* HOVER OFF */

  -webkit-transition: all 5s ease;

  -moz-transition: all 5s ease;

  -o-transition: all 5s ease;

  -ms-transition: all 5s ease;

}

li a:hover {

  font-size: 80px;

  /* HOVER ON */

  -webkit-transition: all 5s ease;

  -moz-transition: all 5s ease;

  -o-transition: all 5s ease;

  -ms-transition: all 5s ease;

}
<ul class="nav nav-pills">
  <li><a href="#">A</a>
  </li>
  <li><a href="#">B</a>
  </li>
  <li><a href="#">C</a>
  </li>
  <li><a href="#">D</a>
  </li>
  <li><a href="#">E</a>
  </li>
  <li><a href="#">F</a>
  </li>
  <li><a href="#">G</a>
  </li>
  <li><a href="#">H</a>
  </li>
  <li><a href="#">I</a>
  </li>
  <li><a href="#">J</a>
  </li>
  <li><a href="#">K</a>
  </li>
  <li><a href="#">L</a>
  </li>
  <li><a href="#">M</a>
  </li>
  <li><a href="#">N</a>
  </li>
  <li><a href="#">Ñ</a>
  </li>
  <li><a href="#">O</a>
  </li>
  <li><a href="#">P</a>
  </li>
  <li><a href="#">Q</a>
  </li>
  <li><a href="#">R</a>
  </li>
  <li><a href="#">S</a>
  </li>
  <li><a href="#">T</a>
  </li>
  <li><a href="#">U</a>
  </li>
  <li><a href="#">V</a>
  </li>
  <li><a href="#">X</a>
  </li>
  <li><a href="#">Y</a>
  </li>
  <li><a href="#">Z</a>
  </li>
</ul>

Why do it in JS when you can do it in CSS alone?

Update

With effect just change to fast depending on your need i made it slow to show how it would look

Upvotes: 2

Mohamed-Yousef
Mohamed-Yousef

Reputation: 24001

you just need to use 'font-size' instead of font-size

$(document).ready(myMain);
function myMain(){
    $("a").hover(big , small);

    function big(){
        $(this).animate({'font-size':'50px'},"fast");
    }
    function small(){
        $(this).animate({'font-size':'15px'},"fast");
    }
}

DEMO

Note : you can use custom duration instead of 'fast' and 'slow' by default duration : 400 find it here animate()

But I prefer to use hover in css like in @Pekka answer and use transition .. anyway its up to you

Upvotes: 3

Related Questions