Как показывать и скрывать информацию персонажей?

Привет я стараюсь создавать селектор персонажей, где выбрав изображение, покажи информацию персонажа в специфическом средстве, потом выбрав другое изображение, предыдущая скрывается и показывает информацию другого персонажа у них есть какая-то идея, из как делания этого?

<div class="chara-select">
    <img src="chara-1.png" alt="" class="">
    <img src="chara-2.png" alt="" class="">
    <img src="chara-3.png" alt="" class="">

</div>
<br>
<br>
<section id="chara-cont" >

    <div class="container" data-chara="chara-1">
        <div class="row">
            <div class="col-8">
                <h1> chara-1 </h1><br>
                  <!-- info aqui -->
             </div>
            <div class="col-4"><!-- Sprite(dieño del personaje) aqui --></div>
        </div>
    </div>
    <div class="container" data-chara="chara-2">
        <div class="row">
            <div class="col-8">
                <h1> chara-2 </h1><br>
                  <!-- info aqui -->
             </div>
            <div class="col-4"><!-- Sprite(dieño del personaje) aqui --></div>
        </div>
    </div>
    <div class="container" data-chara="chara-3">
        <div class="row">
            <div class="col-8">
                <h1> chara-3 </h1><br>
                  <!-- info aqui -->
             </div>
            <div class="col-4"><!-- Sprite(dieño del personaje) aqui --></div>
        </div>
    </div>

</section>
1
задан 28.12.2019, 00:47
1 ответ

С эффектами hide и show из jQuery ты можешь добиваться этого.

AdemГЎs ты можешь контролировать скорость, в которой он появляется и скрывает текст добавляя их parГЎmetros "slow", "fast", или она duraciГіn, который ты желал выраженная в миллисекундах.

$(document).ready(function(){
  $("#chara2").click(function(){
    $("#p2").show(500);//(500) controla la velocidad en que aparece o desaparece el texto en milisegundos
    $("#p1").hide('slow');
  });
  $("#chara1").click(function(){
    $("#p1").show('fast');
    $("#p2").hide(500);
  });
});
<!DOCTYPE html>
<html>
<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>

  <img id="chara1" src="https://picsum.photos/50">
  <p id="p1" hidden>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis urna neque, cursus id metus in, ultricies tincidunt mi. Curabitur non vehicula urna. Curabitur metus sapien, fringilla at magna at, ultrices vehicula augue. Mauris vitae urna sodales arcu laoreet consectetur. Donec massa mi, condimentum vel rutrum non, tincidunt sagittis nisi.</p>
  <br>

  <img id="chara2" src="http://lorempixel.com/50/50">
  <p id="p2" hidden>Quisque mattis mattis mi, id semper ex rutrum eu. Nam metus lacus, euismod id sem non, tempor bibendum purus. In hendrerit luctus sem eget porttitor. Interdum et malesuada fames ac ante ipsum primis in faucibus. Cras nec sapien sem. Vivamus elementum ipsum nibh. Sed dictum feugiat orci, eu luctus orci lacinia ut.</p>

</body>
</html>
3
ответ дан 29.12.2019, 09:10