Скрыть элемент после нажатия на него - PullRequest
Новая
       14

Скрыть элемент после нажатия на него

0 голосов
/ 29 октября 2018

Todo:

  • Плавно скрыть элемент после нажатия на него, как на этой странице https://www.alphafx.co.uk/, когда вы нажимаете на букву A, он плавно исчезает
  • Достичь этого эффекта только с помощью HTML, CSS, JavaScript? 

    var foo = document.getElementById('foo');

document.getElementById('hide-button').onclick = function () {
    foo.className = 'hidden';
};

document.getElementById('show-button').onclick = function () {
    foo.className = '';
};
       #foo {
    transition-property: visibility, opacity;
    transition-duration: 0s, 1s;
}

#foo.hidden {
    opacity: 0;
    visibility: hidden;
    transition-property: opacity, visibility;
    transition-duration: 1s, 0s;
    transition-delay: 0s, 1s;
}
<a href="#" id="foo">Text</a>
<button id="hide-button">Hide</button>
<button id="show-button">Show</button>

Ответы [ 6 ]

0 голосов
/ 29 октября 2018

, если вы хотите использовать JavaScript вместо использования jQuery. затем Попробуйте это 

/******define time-delay only in s(seconds)****/
    var timeSlot = '.3s';
     function hide(obj){
        obj.style.visibility= 'hidden';
        obj.style.opacity= 0.8;
        obj.style.transition= 'visibility 0s linear'+timeSlot+', opacity '+timeSlot+' linear';
    }
.div1 {
          font-size: 1.2rem;
          cursor: pointer;
          text-align: center;
          margin-top:-100px;
       }
.logo {
         font-size: 10rem;
      }
<div class="div1" onclick="hide(this);">
    <h1 class="logo">A</h1>                 
 </div>
0 голосов
/ 29 октября 2018

Вот ответ в ванильном JavaScript (без использования jQuery)

HTML 

<a href="#" id="foo" class="foo">Text</a>
<br />
<button id="hide-button" onclick="hideButton()">Hide</button>
<button id="show-button" onclick="showButton()">Show</button>

JavaScript 

const hideButton = () => {
    document.getElementById("foo").classList.add('hidden');
}

const showButton = () => {
    document.getElementById("foo").classList.remove('hidden');
}

CSS 

 .foo {
  transition-property: visibility, opacity;
  transition-duration: 0s, 1s;
}

.foo.hidden {
  opacity: 0;
   visibility: hidden;
   transition-property: opacity, visibility;
   transition-duration: 1s, 0s;
   transition-delay: 0s, 1s;
}
0 голосов
/ 29 октября 2018

Этого легко добиться, используя эффект jQuery fadeOut (). Ниже приведен справочник по w3scool: 

https://www.w3schools.com/jquery/eff_fadeout.asp

Нажмите кнопку «Попробуйте сами», и вы сможете изменить код в соответствии с вашими требованиями.

Вот еще один рабочий пример для вас: 

https://jsfiddle.net/kag4jqyh/
0 голосов
/ 29 октября 2018

То, что вы хотите, это просто анимация, чтобы скрыть вид.

Вы можете использовать <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> для получения таких красивых эффектов. Вы можете увидеть пример кода ниже. 

   <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script>
        $(document).ready(function(){
            $("#btn1").click(function(){
                $("#box").animate({opacity: 0});
            });
            $("#btn2").click(function(){
                $("#box").animate({opacity: 1});
            });
        });
    </script>

    </head>
    <body>
        <button id="btn1">Animate</button>
        <button id="btn2">Reset</button>
        <div id="box" style="background:#98bf21;height:100px;width:100px;margin:6px;"></div>
    </body>
0 голосов
/ 29 октября 2018

Вы можете добиться этого, используя jQuery fadeOut, проверьте рабочую скрипту ниже:

Использование jQuery 

<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <title>fadeOut demo</title>
  <style>
    .hide {
      font-size: 150%;
      cursor: pointer;
      text-align: center;
    }
    
    h1 {
      text-align: center;
    }
  </style>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>

<body>

  <div class="hide">
    <h1>A</h1>
    <p>
      If you click on this paragraph you'll see it just fade away.
    </p>
  </div>
  <script>
    $(".hide").click(function() {
      $(".hide").fadeOut("slow");
    });
  </script>

</body>

</html>

Использование JavaScript 

function fadeOutEffect() {
  var fadeTarget = document.getElementById("hide");
  var fadeEffect = setInterval(function() {
    if (!fadeTarget.style.opacity) {
      fadeTarget.style.opacity = 1;
    }
    if (fadeTarget.style.opacity > 0) {
      fadeTarget.style.opacity -= 0.1;
    } else {
      clearInterval(fadeEffect);
    }
  }, 200);
}

document.getElementById("hide").addEventListener('click', fadeOutEffect);
<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <title>fadeOut demo</title>
  <style>
    #hide {
      font-size: 150%;
      cursor: pointer;
      text-align: center;
    }
    
    h1 {
      text-align: center;
    }
  </style>
</head>

<body>

  <div id="hide">
    <h1>A</h1>
    <p>
      If you click on this paragraph you'll see it just fade away.
    </p>
  </div>

</body>

</html>
0 голосов
/ 29 октября 2018

Пожалуйста, попробуйте это: 

$(function() {
    $('#spantext').on('click', function() {
      // $(this).hide();

      $(this).fadeOut("slow"); // if you want to hide it slow
        
    });

    
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span id="spantext">this is a text</span>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...