网页上的CSS动画按钮没有运行所有动画（通过Javascript添加到页面的按钮）

时间：2018-03-14 22:48:08

标签： javascript jquery html css

我正在开展这个网页视觉升级项目，我遇到了让我的动画按钮完全动画的问题。它们会在悬停时改变颜色，但它们还应包括按钮文本的轻微移动以及按钮内文本旁边的图标外观。

我在独立的HTML文档上测试了这个概念，因为在我们的测试服务器上反复测试仍然需要在每次构建加载之间进行一段时间（这是另一个令人头疼的问题，谢天谢地，在我的部门之外！）。

作为独立HTML页面的工作概念如下所示：

<!DOCTYPE html>
<html>
<head>
<style>
.leftEnd {
  height: 0;
  width: 0;
  border-left: 25px solid transparent;
  border-right: 0px solid #780a29;
  border-bottom: 63px solid #780a29;
  border-top: 0px solid transparent;
  float: left;
}

/*Button 2 was intended to be for a dropdown. Not using currently, but may in future*/
.button, .button2 {
  display: inline-block;
  background-color: #780a29;
  border: none;
  color: #FFFFFF;
  text-align: center;
  font-size: 20px;
  padding: 20px;
  width: 200px;
  transition: all 0.5s;
  cursor: pointer;
  margin: 0px;
  float: left;
}

.button, .button2, span {
  cursor: pointer;
  display: inline-block;
  position: relative;
  right: 0px;
  transition: 0.5s;
}

.button span:after {
  content: ' \00bb';
  position: absolute;
  opacity: 0;
  top: 0;
  right: 0px;
  transition: 0.5s;
}
.button2 span:after {
  content: '\25BC';
  position: absolute;
  opacity: 0;
  top: 0;
  right: 0px;
  transition: 0.5s;
  margin-right: -0.25em;
  font-size: .75em;
  padding-top: .2em;
}

.button:hover, .button2:hover {
  background-color: #490619;
}
.button:hover span {
  padding-right: 25px;
}
.button2:hover span {
  padding-right: 25px;
}

.button:hover span:after {
  opacity: 1;
  right: 0;
}
.button2:hover span:after {
  opacity: 1;
  right: 0;
}
</style>
</head>
<body>
    <span class="leftEnd"></span>
    <button class="button"><span>Type 1</span></button>

    <button class="button"><span>Type 1</span></button>

    <button class="button"><span>Type 1</span></button>

</body>
</html>

对于我的项目，我无法触摸HTML源代码，因此我不得不稍微修改CSS，并使用Javascript将其添加到页面中。 CSS看起来像这样：

/*
Toolbar site-navigation links
Future: Condense/simplify this section
*/
.toolbar-btn-grp .leftEndCap {
  height: 0;
  width: 0;
  border-left: 25px solid transparent;
  border-right: 0px solid #780a29;
  border-bottom: 63px solid #780a29;
  border-top: 0px solid transparent;
  float: left;
  cursor: default;
}
/*tbButton 2 was intended to be for a dropdown. Not using currently, but may in future*/
.toolbar-btn-grp .tbButton, .toolbar-btn-grp .tbButton2 {
  display: inline-block;
  background-color: #780a29;
  border: none;
  color: #FFFFFF;
  text-align: center;
  font-size: 20px;
  padding: 20px;
  width: 200px;
  transition: all 0.5s;
  cursor: pointer;
  margin: 0px;
  float: left;
}
.toolbar-btn-grp .tbButton, .toolbar-btn-grp .tbButton2, span {
  cursor: pointer;
  display: inline-block;
  position: relative;
  right: 0px;
  transition: 0.5s;
}
.toolbar-btn-grp .tbButton span:after {
  content: ' \00bb';
  position: relative;
  opacity: 0;
  top: 0;
  right: -20px;
  transition: 0.5s;
}
.toolbar-btn-grp .tbButton2 span:after {
  content: '\25BC';
  position: relative;
  opacity: 0;
  top: 0;
  right: -20px;
  transition: 0.5s;
  margin-right: -0.25em;
  font-size: .75em;
  padding-top: .2em;
}
.toolbar-btn-grp .tbButton:hover, .toolbar-btn-grp .tbButton2:hover {
  background-color: #490619;
}
.toolbar-btn-grp .tbButton:hover span {
  padding-right: 25px;
}
.toolbar-btn-grp .tbButton2:hover span {
  padding-right: 25px;
}

.toolbar-btn-grp .tbButton:hover span:after {
  opacity: 1;
  right: 0;
}
.toolbar-btn-grp .tbButton2:hover span:after {
  opacity: 1;
  right: 0;
}
.toolbar-btn-grp {
    margin-left: 25%;
}

我用来将这个放在页面上的javascript看起来像这样：

<script type="text/javascript">

    $( document ).ready(function() {

        $('#productToolbar').append('<span class="leftEndCap"></span>');
        $('#productToolbar').append('<button onclick="goHome()" class="tbButton">Main Site</button>');
        $('#productToolbar').append('<button onclick="contact()" class="tbButton">Contact Us</button>');
        $('#productToolbar').addClass('toolbar-btn-grp');
        }
    );

    function goHome() {
        window.location.href = 'https://www.main-site.org/';
        }     

    function contact() {
        window.location.href = 'https://www.main-site.org/contact/';
        }       

</script>

现在，它特别是CSS中span所遵循的功能在我们的网站上没有工作，这让我相信这是问题的关键。我知道span在sub-div级别工作，所以我想知道是否可能在通过JS添加toolbar-btn-grp类时解析CSS类，span元素由于某种原因被排除在外。

1 个答案:

答案 0 :(得分：2)

您可以像这样简化CSS：

$(document).ready(function() {

  $('#productToolbar').append('<button onclick="goHome()" class="tbButton">Main Site</button>');
  $('#productToolbar').append('<button onclick="contact()" class="tbButton">Contact Us</button>');
  $('#productToolbar').addClass('toolbar-btn-grp leftEndCap');
});

function goHome() {
  window.location.href = 'https://www.main-site.org/';
}

function contact() {
  window.location.href = 'https://www.main-site.org/contact/';
}
/*
Toolbar site-navigation links
Future: Condense/simplify this section
*/

.leftEndCap {
  position:relative;
}
.leftEndCap:before {
  content:"";
  position:absolute;
  left:-25px;
  top:0;
  height: 0;
  width: 0;
  border-left: 25px solid transparent;
  border-right: 0px solid #780a29;
  border-bottom: 63px solid #780a29;
  border-top: 0px solid transparent;
}


/*tbButton 2 was intended to be for a dropdown. Not using currently, but may in future*/

.toolbar-btn-grp .tbButton,
.toolbar-btn-grp .tbButton2 {
  display: inline-block;
  background-color: #780a29;
  border: none;
  color: #FFFFFF;
  text-align: center;
  font-size: 20px;
  padding: 20px;
  width: 200px;
  transition: all 0.5s;
  cursor: pointer;
  margin: 0px;
  float: left;
}

.toolbar-btn-grp .tbButton,
.toolbar-btn-grp .tbButton2 {
  cursor: pointer;
  position: relative;
  right: 0px;
  transition: 0.5s;
}

.toolbar-btn-grp .tbButton:after {
  content: ' \00bb';
  position: relative;
  opacity: 0;
  top: 0;
  right: 10px;
  transition: 0.5s;
}

.toolbar-btn-grp .tbButton2:after {
  content: '\25BC';
  position: relative;
  opacity: 0;
  top: 0;
  right: 20px;
  transition: 0.5s;
  margin-right: -0.25em;
  font-size: .75em;
  padding-top: .2em;
}

.toolbar-btn-grp .tbButton:hover,
.toolbar-btn-grp .tbButton2:hover {
  background-color: #490619;
}

.toolbar-btn-grp .tbButton:hover {
  padding-left: 5px
}


.toolbar-btn-grp .tbButton:hover:after,
.toolbar-btn-grp .tbButton2:hover:after{
  opacity: 1;
  right: -20px
}

.toolbar-btn-grp {
  margin-left: 25%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="productToolbar" ></div>

相关问题
最新问题