Question

我正在尝试编写一个切换div不透明度的代码，但是我遇到了麻烦。如果我单击此按钮，我希望它将#infodiv的不透明度设置为1.0，现在它设置为0.0，就像这样。

#infodiv{
    width: 250px;
    height: 0px;
    margin-top: 10%;
    opacity: 0.0;
}

这是我试图打电话的功能。

function toggles(){
    infodiv.css('opacity', '1.0');
}

这可能是需要进行一些调整的功能吗？感谢任何愿意帮助的人。这是一个fiddle

Answer 1

您必须使用jQuery设置元素的样式：

function toggles() {
  $('#infodiv').css('opacity', '1.0');
}

Answer 2

你需要使用ID selector来返回一个jQuery对象，因为方法.css()是一个jQuery函数

function toggles() {
  $('#infodiv').css('opacity', '1.0');
}

DEMO

但是我建议你创建一个像

这样的CSS类

.higheropacity {
    opacity: 1.0 !important
}

然后使用.toggleClass()方法

function toggles() {
  $('#infodiv').toggleClass('higheropacity');
}

DEMO

Answer 3

切换是否在jQuery中显示某些内容的最简单方法是使用.toggle()

$('#infodiv').click(function(){
   $(this).toggle();
})

如果您需要更改不透明度，请尝试toggleClass()并创建一个具有不透明度的新CSS类

// CSS

.opaque{
   opacity: 1;
}

// jQuery

$('#infodiv').click(function(){
   $(this).toggleClass('opaque');
})

Answer 4

如果你使用纯javascript，你的功能将是那样的

function toggles(){
   document.getElementById('infodiv').style.opacity = '1.0';
}

Answer 5

使用Element.classList

var infodiv = document.querySelector("#infodiv");

function clickToggle(){
   this.classList.toggle("active")
}

infodiv.addEventListener("click",clickToggle, false);

#infodiv{
width: 250px;
height: 250px;
background: red;
opacity: 1;
}
#infodiv.active{opacity: 0}

<div id=infodiv></div>

Answer 6

$(function() {
  $('#btn').click(function() {
      $('#infodiv').toggleClass('active');
  });
});

#infodiv {
  width: 250px;
  margin-top: 10%;
  opacity: 0.0;
}
#infodiv.active {
  opacity: 1;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="infodiv">
  <div class="infotext">This is a test.</div>
</div>
<button type="button" id="btn">btn</button>

Answer 7

嗯，除了jQuery之外，你总是可以做类似

的事情

function toggles() {
   document.getElementById('infodiv').style.opacity = 1;
}

如果你想使用纯粹的javascript。

Answer 8

它必须是一个函数吗？
为什么不使用：

wait

来自 api -“.toggle() 方法同时为匹配元素的宽度、高度和不透明度设置动画。”

切换div的不透明度

8 个答案: