Question

我正在寻找一种方法来实现这个目标：

我希望网站上有一个按钮来控制背景动画。它应该通过点击“淡出”（直接，没有延迟）整个背景动画，但再次点击它应该“淡入”。

我试过了：

if (document.querySelector('.Welle').style.display == 'none'){
    document.querySelector('.Welle').style.display = 'block';
}
else {
    document.querySelector('.Welle').style.display = 'none';
}

<a type="button" value="Klicken um Hintergrundanimation zu beenden" onclick="backgroundbutton()" style="text-decoration: none;">
    <button>
        Hintergrund
    </button>
</a>

但它不起作用，我做错了什么？有人可以纠正我吗？

非常感谢

Answer 1

试试这个：

＆＃13;

function backgroundbutton() {
  if (document.querySelector('.Welle').style.display == 'none'){
    document.querySelector('.Welle').style.display = 'block';
  }
  else {
    document.querySelector('.Welle').style.display = 'none';
  }
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<input type="button" value="Hintergrund" onclick="backgroundbutton();" />
<div class="Welle">test</div>

＆＃13;

Answer 2

var Welle = document.querySelector('.Welle');

function backgroundbutton() {
  // if the display is "none", we return "block", else we return "none"
  var dp = (Welle.style.display == 'none') ? 'block' : 'none';
  Welle.style.display = dp;
}

body { margin: 0; padding: 0 }

.Welle {
  width: 100%;
  height: 100vh;
  background: yellow url('http://wallpapercave.com/wp/pwQMS6f.jpg') no-repeat;
  background-size: cover;
  z-index: -1;
  display: block;
  position: fixed;
  top: 0;
  left: 0;
}

<div class="Welle"></div>
<button onclick="backgroundbutton()">Hintergrund</button>

按钮隐藏背景动画

2 个答案: