Search code examples
javascriptjqueryfadein

JS FadeIn not working on "a href"

Using JS function FadeIn in very basic document, it is not working.

HTML

<body>
    <div class="container">
        <h1 id="h1">Something</h1>
        <div class="btn" id="btn">  
            <a href="main.html">ENTER</a>
        </div>
    </div>
    <script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script type="text/javascript" language="javascript">
        var main = function() {
            //$('#h1').fadeIn(3200);
            $('#btn').fadeIn(1000);
        };

        $(document).ready(main);
    </script>
</body>

The first "h1" element works as it should, however the "btn" doesn´t respond at all. Can it be maybe in CSS?

CSS

btn a {
  display: none;
  background: #00cccc;
  position: absolute;
  top: 80%;
  left: 44%;
}

.btn a:hover { 
 background: #00a58f;
}
Solution

  • First your CSS selector is looking for a tag called btn

    Use a class selector instead

    .btn a {

    Also you would need to fadeId the a element instead as that is the one that is hidden.

    $('#btn a').fadeIn(1000);

    If you are instead fading the div, set display none to the div itself.

    Check Fiddle