时间戳

首页 > 解决方案 > 如何使用 css 或 jquery 更改按钮图像并在单击时对其进行动画处理？

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

问题描述

在这个网站上：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>

这段代码什么也没做。不确定我是否错误地定位了元素，或者脚本是否不正确，或者我是否完全偏离了标记。

标签： javascriptjquerycss

解决方案

我用几乎正是你需要的东西做了一支笔。只需根据自己的喜好稍微调整一下即可。 代码笔

$('a').click(function (){
  $(this).toggleClass('active');
});
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>

推荐阅读