Мне было интересно, как заставить отдельные пункты меню исчезать с задержкой при загрузке страницы.

Я бы хотел, чтобы они исчезали не в хронологическом порядке, поэтому предположим, что сначала появятся #item 3, затем #item 1, затем #item 5 и так далее ...

Как будет выглядеть такой jQuery или JavaScript код и где в коде мне нужно будет его вставить?

Большое спасибо за помощь!

2
mariola.uk 17 Дек 2015 в 18:11

4 ответа

Лучший ответ

Это должно сделать работу. По сути, задайте элементы, которые вы хотите добавить в класс скрытого, или любое другое имя класса, на которое вы можете ориентироваться. Затем вы устанавливаете отображение этого класса на «none». Используя jQuery, вы нацеливаетесь на каждый элемент, для которого вы хотите добавить fadeIn, по его идентификатору, и вы устанавливаете желаемую задержку () до того, как этот элемент будет fadedIn, используя функцию fadeIn ().

Таким образом, в этом примере # item2 будет исчезать через 1500 мс, # item3 - через 2500 мс и # item1 - через 4000 мс.

Надеюсь это поможет!

    <!doctype html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <title>Fade In</title>
    
        <style type="text/css">
            .hidden {
                display: none;
            }
        </style>
    
    </head>
    
    <body>
        <nav>
            <ul>
                <li id="item1" class="hidden">First</li>
                <li id="item2" class="hidden">Second</li>
                <li id="item3" class="hidden">Third</li>
            </ul>
        </nav>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
        <script>
            $(document).ready(function() {
                $('#item1').delay(4000).fadeIn('slow')
                $('#item3').delay(2500).fadeIn('slow')
                $('#item2').delay(1500).fadeIn('slow')
            })
        </script>
    </body>
    
    </html>
3
Praveen Kumar Purushothaman 17 Дек 2015 в 16:21

Предполагая, что список, как этот, неизвестного количества предметов

<div class="fadein-delay">
  <div>item 1</div>
  <div>item 2</div>
  <div>item 3</div>
  <div>item 4</div>
  ...
</div>  

У вас будет более модульный скрипт

$(function () {
  $(".fadein-delay > div").each(function(index) {
    console.log($(this).text());
      $(this).delay(300*index).fadeIn(600);
  });
});

И CSS, который изначально скрывает все элементы

.fadein-delay > div {
  display: none;
}

Вот рабочий пример https://codepen.io/giorgosk/pen/aVpXad

0
GiorgosK 9 Ноя 2017 в 22:08

Это можно сделать, выполнив следующие действия:

< Сильный > 1 . Установите для свойства «display» элементов значение «none» в CSS

< Сильный > 2 . Поместите свой код в "$ (document) .ready (function () { здесь })" после включения библиотеки jQuery .

< Сильный > 3 . Установите для delay ( value ) элементы, необходимые для того порядка, в котором вы хотите показывать элементы .

< Сильный > 4 . Вызвать функцию затухания или любой другой эффект или функцию для элементов

Вы можете заставить элементы отображаться в любом порядке, вам нужно просто установить задержку ( значение ) соответственно. Чем позже вы хотите, чтобы элементы появлялись, тем выше вы должны установить это значение.

В этом примере элементы отображаются в хронологическом порядке, просто измените задержку ( значение ) в соответствии с вашими потребностями. Вы можете выбрать элементы в соответствии с вашими потребностями. Например, здесь ID не используется для выбора элементов, но также может использоваться. Этот метод тоже отлично работает!

Не забудьте сначала включить библиотеку jQuery!

<!DOCTYPE html>
<html>
    <head>
        <style>
            li {
            display: none
            }
        </style>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js">        </script>
        <script>
            $(document).ready(function(){
            $("li:nth-child(1)").fadeIn();
            $("li:nth-child(2)").delay("1000").fadeIn();
            $("li:nth-child(3)").delay("2000").fadeIn();
            $("li:nth-child(4)").delay("3000").fadeIn();
            $("li:nth-child(5)").delay("4000").fadeIn();
            $("li:nth-child(6)").delay("5000").fadeIn();
            $("li:nth-child(7)").delay("6000").fadeIn();
            $("li:nth-child(8)").delay("7000").fadeIn();
            $("li:nth-child(9)").delay("8000").fadeIn();
            $("li:nth-child(10)").delay("9000").fadeIn();
        });
        </script>
    </head>
    <body>
        <ul>
            <li>First</li>
            <li>Second</li>
            <li>Third</li>
            <li>Fourth</li>
            <li>Fifth</li>
            <li>Sixth</li>
            <li>Seventh</li>
            <li>Eighth</li>
            <li>Ninth</li>
            <li>Tenth</li>

        </ul>
    </body>
</html>
1
Zed Strong 17 Дек 2015 в 20:45

Вы можете использовать setTimeout и поместить его в замыкание и работать.

$(function () {
  var currentTime = 0;
  $("#item1, #item2, #item3")
    .hide()
    .each(function () {
    (function (which, currentTime) {
      setTimeout(function () {
        which.fadeIn(100);
      }, currentTime);
    })($(this), currentTime);
    currentTime += 2500;
  });
});
div {background: #ccf; margin: 10px; line-height: 100px; text-align: center;}
<script src="https://code.jquery.com/jquery-1.11.3.js"></script>
<div id="item1">This is menu 1.</div>
<div id="item2">This is menu 2.</div>
<div id="item3">This is menu 3.</div>

Полный код

<!DOCTYPE html>
<html>
  <head>
    <script src="https://code.jquery.com/jquery-1.11.3.js"></script>
    <meta charset="utf-8" />
    <script>
      $(function () {
        var currentTime = 0;
        $("#item3, #item1, #item2")
          .hide()
          .each(function () {
          (function (which, currentTime) {
            setTimeout(function () {
              which.fadeIn(100);
            }, currentTime);
          })($(this), currentTime);
          currentTime += 2500;
        });
      });
    </script>
    <style>
      div {background: #ccf; margin: 10px; line-height: 100px; text-align: center;}
    </style>
    <title>My Menus</title>
  </head>
  <body>
    <div id="item1">This is menu 1.</div>
    <div id="item2">This is menu 2.</div>
    <div id="item3">This is menu 3.</div>
  </body>
</html>
1
Praveen Kumar Purushothaman 17 Дек 2015 в 15:43