Fade div in и out с JQuery

-2

Я схожу с ума здесь .....Fade div in и out с JQuery

Я хотел погладить и разбить div на той же странице. Я не знаю JQuery, поэтому начал искать то, что хотел.

Я нашел this. Он делает именно то, что я хочу сделать (в скрипке).

Так что я начал копировать и прочее, но я просто не будет работать

Вот что я сделал ....

В моей <head> я добавил стиль JQuery и CSS

<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script> 
<script type="text/javascript"> 
$('#btn').click(function(e){  
    $('#fancy, #btn').fadeOut('slow', function(){ 
     $('#bank, #btn-bk').fadeIn('slow'); 
    }); 
}); 

$('#btn-bk').click(function(e){  
    $('#bank, #btn-bk').fadeOut('slow', function(){ 
     $('#fancy, #btn').fadeIn('slow'); 
    }); 
}); 
</script> 
<style> 
#bank {display:none;} 
#btn-bk {display:none;} 
</style>

В теле я поместил HTML

<div><a href="#" id="btn">Show bank div and hide fancy div</a></div> 
<div id="btn-bk"><a href="#">back</a></div> 
<div id="bank">Bank Div</div> 
<div id="fancy">Fancy Div</div>

Он ничего не делает. Я не вижу, что я делаю неправильно!

М.

источник

2015-09-18 Interactive

он работает нормально, вы получаете какую-либо ошибку. – guradio

Попробуйте разместить 'jQuery' и'

Он ничего не делает, потому что вы разместили свой код в голове, и вы не ждали страниц для загрузки, и, когда он выполняет, селекторы (например $('#btn')) возвращают пустой объект. Либо:

Переместить код ниже </body>.
Используйте обработчик jQuery «on load» ($()).

источник

2015-09-18 07:47:15 Amit

Wrap код JS в document.ready заявление:

$(function() { 
    $('#btn').click(function(e){ 
     $('#fancy, #btn').fadeOut('slow', function(){ 
      $('#bank, #btn-bk').fadeIn('slow'); 
     }); 
    }); 

    $('#btn-bk').click(function(e){ 
     $('#bank, #btn-bk').fadeOut('slow', function(){ 
      $('#fancy, #btn').fadeIn('slow'); 
     }); 
    }); 
});

Что это будет на самом деле, не будет ждать, пока ваш документ Объектная модель (DOM) готова к выполнению Javascript.

Вы можете использовать $ (окно) .load ({}), но в этом случае вся ваша страница, включают в себя изображения и фреймы, будут полностью загружены, и только ТОГДА ваш Javascript будут работать (Source)

Это нормально на простых страницах, но в более сложных случаях это вызовет у вас головную боль.

источник

2015-09-18 07:57:58

Это лучшее для меня. – Jai

Thnx для объяснения! – Interactive

@Jai благодарит за вашу оценку! –

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