Question

在此站点上：https://usyouthbilliards.com/home/上有一个“联系我们”按钮，当单击该按钮时，它会导致滑动联系表格。我一直在尝试将实际的“联系我们”按钮更改为面板出现时会旋转的“ X”，就像在此示例站点https://www.future500idcamp.com/上所做的一样，但是我似乎无法使其正常工作。有人可以帮我解决这个问题吗？谢谢

我试图只使用简单的CSS和jquery来定位按钮，但是显然我做错了。

<script type="text/javascript">
jQuery(document).ready(function() {
$('.ncf-tab-icon').rotate({maxAngle:25,minAngle:-55,
bind: [
{"mouseover":function(){$(this).rotateAnimation(85); } },
{"mouseout":function(){$(this).rotateAnimation(-35); } }]});
});
</script>

此代码没有执行任何操作。不知道我是否错误地定位了元素，或者脚本是否正确，或者我是否完全不正确。

Answer 1

我不是专业人士，但是最近我对这种灵敏的CSS侧边栏进行了一些测试。编写js更改CSS怎么样？

ex-
https://codepen.io/thetallweeks/pen/boinE

Answer 2

我用几乎完全需要的东西制成了一支笔。只是稍微调整一下即可。 CodePen

a {
  right: 0px;
  top: 50%;
  line-height: 1em;
  padding: 8px;
  position: absolute;
  display: inline-block;
  background: #CD1349;
  font-size: 22px;
  color: #fff;
  text-transform: uppercase;
  text-decoration: none;
  transform: rotate(-90deg);
  transition: transform .3s;
  transform-origin: center center;
}
a span:nth-child(2) {
  display: none;
}
a.active {
  transform: rotate(90deg);
}
a.active span:nth-child(1) {
  display: none;
}
a.active span:nth-child(2) {
  display: block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a href="#">
  <span>Contact Us</span>
  <span>
    x
  </span>
</a>

{{1}}

如何使用CSS或jquery更改按钮图像并在单击时对其进行动画处理？

2 个答案: