Избавляемся от задержки выцветания в предмете - PullRequest
Новая
       15

Избавляемся от задержки выцветания в предмете

0 голосов
/ 21 ноября 2011

Если вы видите этот JSFiddle здесь , я просто пытаюсь анимировать в кнопке / ссылке, хотя и определенным образом. Я хочу, чтобы ссылка все еще применялась в макете, чтобы макет вообще не менялся.

Мой HTML: 

<p>
    <a id="helloWorld" href="#" class="btn primary large">Hello, World! &raquo;</a>
    Fork this to get hacking on <span class="label stark">Bootstrap</span> and <span class="label stark">jQuery</span>.
</p>

Мой CSS: 

#helloWorld { 
     visibility: hidden;
}

Мой JQuery: 

$("#helloWorld")
    .delay(1000) // after a second
    .css("visibility", "visible") // make it 'visible
    .hide() // but hide it 
    .fadeIn(500); // then fade it in

Я должен сделать visibility:visible, а затем hide() взломать , как указано здесь . Странно то, что если я вообще отключаю свой JavaScript, ссылка обычно занимает место. Если я включу JavaScript, то макет будет испорчен. Похоже, что по какой-то причине выполняется css() и hide() до , задержка закончилась! Что я делаю неправильно?

Ответы [ 2 ]

2 голосов
/ 21 ноября 2011

Причина, по которой ваш код не работает, заключается в том, что .delay () не работает так же, как setTimeout javascript. Проверьте http://api.jquery.com/delay/ для получения дополнительной документации по этому вопросу.

Попробуйте это исправить: 

setTimeout(function() {
  $("#helloWorld").css("visibility", "visible").hide().fadeIn(500);
}, 1000);

Вот jsfiddle: http://jsfiddle.net/7LGrS/2/

0 голосов
/ 21 ноября 2011 
<a style='display:none; ' id="helloWorld" href="#" class="btn primary large">
 Hello, World! &raquo;
</a>

just add the style to the anchor
...