尝试使用 jQuery 更改元素的不透明度

Question

到目前为止，我已经能够打开元素的不透明度。但未能通过点击将其关闭。

抱歉，如果我的术语不正确，我才刚刚开始。任何帮助将不胜感激。

$('.link-left').on('click', function () {
$('.about').css('opacity', '1',1000);
})

Answer 1

切换 class 并在那里使用 opacity 怎么样？

const $about = $('.about'), $link = $('.link-left');
$link.on('click', ()=> $about.toggleClass('show'));

.about {
  transition: opacity 1s ease;
  opacity: 0;
}

.show {
  opacity: 1;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="link-left">toggle</button>
<div class="about">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</div>

如果您只想要 jQuery，也许像这样的方法可以解决问题：

const $about = $('.about'), $link = $('.link-left');
let showing = false;
$link.on('click', ()=> {
  showing = !showing;
  $about.css('opacity',Number(showing));
});

.about {
  opacity: 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="link-left">toggle</button>
<div class="about">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</div>

Answer 2

这个想法很好，你只需要正确的语法

$('.link-left').on('click', function () {
  $('.about').css('opacity', 0);
});

Answer 3

你可以使用fadeToggle(1000)括号内的数字是以毫秒为单位的渐变速度。 jQuery 方法的好处在于它使 div 完全消失。这就是为什么我将属性 cursor:pointer; 添加到 .about class，所以你可以看到它消失后不再存在，与不透明度相反，这使得 div 不可见但仍然存在。

 $(document).ready(function(){
    $('.link-left').on('click', () => $(".about").fadeToggle(1000))
})

.about {
  cursor:pointer;
  background-color:blue;
  color:white;
  display: inline-block;
  padding:20px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="link-left">toggle</button>
<p>
<div class="about" style="display:none;">Im here bitches!</div>

备注

$('.link-left').on('click', () => $(".about").fadeToggle(1000)) 这等同于：

$('.link-left').on('click', function(){
 $(".about").fadeToggle(1000)
})

我喜欢这种更简洁的方法。

Answer 4

如果您想在点击时调用该函数，那么这样的方法可能会对您有所帮助。

$(".link-left").click(function(){
$(".about").css("opacity", 1);
});

这对我有用。然而，很多时候我们的浏览器不接受 jQuery 语法，因为我们需要在 header 脚本中包含 jQuery 的 CDN。确保你已经做到了。

尝试使用 jQuery 更改元素的不透明度

Trying to change an elements opacity on click using jQuery

css

jquery

function

onclick

备注