javascript - jQuery fadeToggle 从隐藏而不是可见开始

Question

我希望点击我的 div 文本时出现。但不幸的是，它在第​​一次单击时隐藏，在第二次单击时它变得可见。怎么了？

$('#fPaperCirclePic').on('click', function () {
    $('#fPaperCircleText, #isargebla, #moq10k').css('visibility', 'visible');
    $('#fPaperCircleText, #isargebla, #moq10k').fadeToggle("slow", "linear");
});

JSBIN

Answer 1

从js中删除这一行

$('#fPaperCircleText, #isargebla, #moq10k').css('visibility', 'visible');

并在 css 中添加 display:none 替换它 visibility:hidden

fadeToggle 切换 display 属性

$(document).ready(function() {
  $('#fPaperCirclePic').on('click', function() {
    $('#fPaperCircleText, #isargebla, #moq10k').fadeToggle("slow", "linear");
  });
});

#fPaperCircleText,
#isargebla,
#moq10k {
  display: none;
}
#fPaperCirclePic {
  background: red no-repeat;
  height: 100px;
  width: 100px;
  margin-top: 10px;
  margin-left: 85px;
  cursor: pointer;
}
#fPaperCircleText {} #isargebla {
  font-size: 19px !important;
  font-weight: bold;
}
#moq10k {}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="fPaperCirclePic"></div>
<span id="fPaperCircleText">                     
asdasasd <br />დამოუკიდებელი სისტემა</span>
<span id="isargebla">ისარგებლა</span>
<span id="moq10k">  <h3>10 000</h3> -ზე მეტმა მოქალაქემ </span>