Можем ли мы использовать CSS вместо .fadeIn () в jQuery? - PullRequest
Новая
       2

Можем ли мы использовать CSS вместо .fadeIn () в jQuery?

0 голосов
/ 11 июля 2020

Метод .fadeOut () анимирует непрозрачность совпадающих элементов. Когда непрозрачность достигает 0, для свойства стиля отображения устанавливается значение none, поэтому элемент больше не влияет на макет страницы.

Если вышеизложенное верно, то почему я сталкиваюсь с проблемами, чтобы вернуть абзац? 

$("button").click(function() {
  if ($("#paragraph").css("display") == "none") {
    $("#paragraph").css("display") = "block";
    $("#paragraph").css("opacity") = 1;

  } else {
    $("#paragraph").fadeOut();
  }

});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<p id="paragraph">This is a paragraph</p>
<button>Click me</button>

Ответы [ 2 ]

1 голос
/ 11 июля 2020

Причина в том, что вы неправильно используете синтаксис присваивания css. Консоль предупредила бы вас об этом. Внесите следующие изменения. 

<script
  src="https://code.jquery.com/jquery-3.5.1.min.js"
  integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0="
  crossorigin="anonymous"></script>
<body>
<p id="paragraph">This is a paragraph</p>
<button>Click me</button>
<script type="text/Javascript">

    $("button").click(function(){
        if ($("#paragraph").css("display") =="none"){
            $("#paragraph").css("display", "block");
            $("#paragraph").css("opacity", '1');
             
        }
        else{
            $("#paragraph").fadeOut();
        }
        
    });


</script>
</body>

Вы можете не обращать внимания на то, как я включил jquery. Я сделал это только для того, чтобы здесь все работало.

0 голосов
/ 11 июля 2020

Используйте метод быстрого доступа show() вместо css(), чтобы упростить 

$("button").click(function() {
  const $p = $("#paragraph");// cache element reference once for efficiency
  if ($p.is(':hidden')) {
    $p.show();
  } else {
    $p.fadeOut();
  }

});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<p id="paragraph">This is a paragraph</p>
<button>Click me</button>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...