jQuery fadeOut () не работает

Question

<div class='toast' onload='function(){setTimeout(function(e){$(this).fadeOut()}, 2000)}'>
<div class='toastIcon'><img src='weather_sunny-icon.png'></div>
<div class='toastLabel'><h1>Weather: Sunny</h1><p>Today's weather forecast predicts sunshine.</div></div>

Я пытаюсь заставить div .toast исчезать при нажатии. В настоящее время при нажатии ничего не происходит. У меня установлена ​​последняя версия jQuery.

Answer 1

Надеюсь, это поможет вам. Как вы и просили, теперь мы исчезаем при нажатии. Я добавил "slow" к функции fadeOut, потому что я бы предпочел это:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='toast' onclick='jQuery(this).fadeOut("slow")'>
    <div class='toastIcon'><img src='weather_sunny-icon.png'></div>
    <div class='toastLabel'><h1>Weather: Sunny</h1>
        <p>Today's weather forecast predicts sunshine.</div>
</div>

Другое решение с использованием вашего тайм-аута:

jQuery( document ).ready( function ( $ ) {
  $( ".toast" ).click( function () {
  	setTimeout( function () {
  		$( ".toast" ).fadeOut();
  	}, 2000 );
  } );
} );

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="toast">
  <div class="toastIcon">
    <img src='weather_sunny-icon.png'>
  </div>
  <div class="toastLabel">
    <h1>Weather: Sunny</h1>
    <p>Today's weather forecast predicts sunshine.</p>
  </div>
</div>

Другим способом является вызов функции при нажатии на элемент:

function fadeOutToast() {
  setTimeout( function () {
  		$( ".toast" ).fadeOut();
  }, 2000 );
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="toast" onclick="fadeOutToast()">
  <div class="toastIcon">
    <img src='weather_sunny-icon.png'>
  </div>
  <div class="toastLabel">
    <h1>Weather: Sunny</h1>
    <p>Today's weather forecast predicts sunshine.</p>
  </div>
</div>

Теперь вы можете выбрать, что лучше всего подходит для вашего проекта. Если бы я был тобой, я бы сделал это так (наконец-то):

jQuery( document ).ready( function ( $ ) {
  $( ".toast" ).click( function () {
  	$( ".toast" ).fadeOut( "slow" );
  } );
} );

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="toast">
  <div class="toastIcon">
    <img src='weather_sunny-icon.png'>
  </div>
  <div class="toastLabel">
    <h1>Weather: Sunny</h1>
    <p>Today's weather forecast predicts sunshine.</p>
  </div>
</div>