JS FadeIn не работает над «a href»

Использование функции JS FadeIn в очень базовом документе не работает.JS FadeIn не работает над «a href»

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>

Первый элемент "h1" работает как надо, однако "БТН" это не распространяется ответить на все. Может быть, это возможно в CSS?

CSS

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

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

источник

2015-07-24 Andrej K

С помощью CSS, вы скрытие '' * внутри * кнопка. Затем, с jQuery, вы исчезаете в самой кнопке. – showdev

Почему вы загружаете две разные версии jQuery? – j08691

И почему вы используете '' для кнопок, когда есть большая поддержка собственного элемента '

Сначала ваш селектор CSS ищет тег под названием btn

Используйте селектор класса вместо

.btn a {

Также вы должны fadeId в a элемент вместо того, чтобы, как это тот, который скрытый.

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

Если вместо замирание в DIV, установить дисплей ни к самому div.

Check Fiddle

источник

2015-07-24 19:51:23

добавление «a» после того, как .btn сделал трюк для меня, это ускользнуло от меня, что мне нужно использовать все это. (Селектор CSS был в оригинальном коде, я просто сделал тупое копирование). Также метод «.fadeOut» представляет собой интересное решение, предложенное @Slatin. Спасибо, ребята! –

-1

DIV должен начаться как скрытый. либо сделать отображение: нет или добавить это до вашего затухания

$ ('# btn'). hide();

источник

2015-07-24 19:48:51 Idget

изменить ваш CSS целевой правильный #btn div

$(document).ready(function() { 
 
    $('#btn').fadeIn(1000); 
 
});

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

 

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class = "container"> 
 
    <h1 id="h1">Something</h1> 
 
    <div class="btn" id="btn"> 
 
     <a href="main.html">ENTER</a> 
 
    </div> 
 
</div>

источник

2015-07-24 19:52:34 indubitablee

вы забыли добавив тп селектор класса .btn a в вашем CSS плюс вы использовали идентификатор в вашей JQuery в то время как вы должны использовать класс здесь, это фиксированный код:

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

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

    <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>

источник

2015-07-24 19:55:16

Почему вы используете половинное решение? Использование JQuery, чтобы оба состояния

$(document).ready(function(){ 
    $('#btn').fadeOut(0).fadeIn(1000); 
});

plunker

источник

2015-07-24 22:08:42

JS FadeIn не работает над «a href»

ответ

Смежные вопросы