Question

我正在处理一个可以激活或停用的按钮。当它被激活时，我希望每五秒左右发光一次。我一直在看这个小提琴

http://jsfiddle.net/AntonTrollback/nqQc7/

并尝试重新设计它，以便我的按钮周围的div将与“icon-effect”类切换，创建闪耀效果，然后在大约一秒后切换，然后它将每次都这样做五秒钟我编辑了小提琴来创建div

<div id = 'my_button_div>
<div>

并且给出了制作红色盒子的各种属性。然后，我离开了fidde的图标效果类，并运行了时间函数

setInterval(function () {
                $('#my_ button_div').toggleClass('icon-effect');
                setTimeout(function () {
                     $('#my_ button_div').toggleClass('icon-effect');
                }, 1000);
            }, 5000);

这是小提琴

http://jsfiddle.net/nqQc7/286/

但我似乎无法让它发挥作用。我把悬停的东西留在那里，但它应该在那些分配的时间触发闪耀效果。

Answer 1

您发布的jsFiddle有几个问题：

它没有导入jQuery，这意味着$无法定义
您在实际元素上切换icon-effect类，但它应该在子元素上
在JavaScript
.icon-effect子元素与#my_button_div元素分开定义（需要在其中）

这是一个固定的jsFiddle：http://jsfiddle.net/nqQc7/289/

Answer 2

您需要首先解决一些编码错误：

更改此内容：

<div id = 'my_button_div>
<div>

对此：

<div id="my_button_div"></div>

更改此内容：

$('#my_ button_div').toggleClass('…');

对此：

$('#my_button_div').toggleClass('…');

现在，要无缝使用Gallagher/Coyier example中的样式，您需要将class="icon"添加到<div id="my_button_div">并在其中嵌套<span class="icon-effect"></span>。

同样如此：

<div class="icon" id="my_button_div">
    <span class="icon-effect"></span>
</div>

然后，您将应用一些特殊的＆＃34;触发的＆＃34;而不是使用:hover伪类。而不是通过jQuery。

所以，这个：

.icon:hover .icon-effect {
    opacity: 1;
    top: -30%;
    left: -30%;
}

成为：

.icon.triggered .icon-effect {
    opacity: 1;
    top: -30%;
    left: -30%;
}

而且：

$('#my_ button_div').toggleClass('icon-effect');

成为这样：

$('#my_ button_div').toggleClass('triggered');

＆＃13;

setInterval(function () {
    $('#my_button_div').toggleClass('triggered');
    setTimeout(function () {
        $('#my_button_div').toggleClass('triggered');
    }, 1000);
}, 5000);

＆＃13;

/* Icon */

.icon {
  display: block;
  width: 32px;
  height: 32px;
  background: red;
    
  position: relative;
  overflow: hidden;
}

/* "shine" element */
/* Could be a pseudo element but they lack support for CSS transitions in some browsers */

.icon .icon-effect {
  position: absolute;
  top: -110%;
  left: -210%;
  width: 200%;
  height: 200%;

  opacity: 0;
  
  background: rgba(255, 255, 255, 0.2);
  background: -moz-linear-gradient(
    left,
    rgba(255, 255, 255, 0.1) 0%,
    rgba(255, 255, 255, 0.1) 75%,
    rgba(255, 255, 255, 0.5) 90%,
    rgba(255, 255, 255, 0.0) 100%
  );
  background: -webkit-linear-gradient(
    top,
    rgba(255, 255, 255, 0.1) 0%,
    rgba(255, 255, 255, 0.1) 75%,
    rgba(255, 255, 255, 0.5) 90%,
    rgba(255, 255, 255, 0.0) 100%
  );
  background: -webkit-gradient(
    linear, left top, right top,
    color-stop(0%  ,rgba(255, 255, 255, 0.2)),
    color-stop(75% ,rgba(255, 255, 255, 0.2)),
    color-stop(90% ,rgba(255, 255, 255, 0.8)),
    color-stop(100%,rgba(255, 255, 255, 0.0))
  );
  background: -o-linear-gradient(
    top,
    rgba(255, 255, 255, 0.1) 0%,
    rgba(255, 255, 255, 0.1) 75%,
    rgba(255, 255, 255, 0.5) 90%,
    rgba(255, 255, 255, 0.0) 100%
  );
  background: -ms-linear-gradient(
    top,
    rgba(255, 255, 255, 0.1) 0%,
    rgba(255, 255, 255, 0.1) 75%,
    rgba(255, 255, 255, 0.5) 90%,6
    rgba(255, 255, 255, 0.0) 100%
  );
  background: linear-gradient(
    top,
    rgba(255, 255, 255, 0.1) 0%,
    rgba(255, 255, 255, 0.1) 75%,
    rgba(255, 255, 255, 0.5) 90%,
    rgba(255, 255, 255, 0.0) 100%
  );

  -webkit-transform: rotate(30deg);
     -moz-transform: rotate(30deg);
      -ms-transform: rotate(30deg);
       -o-transform: rotate(30deg);
          transform: rotate(30deg);
    
  -webkit-transition-property: left, top, opacity;
     -moz-transition-property: left, top, opacity;
      -ms-transition-property: left, top, opacity;
       -o-transition-property: left, top, opacity;
          transition-property: left, top, opacity;
  -webkit-transition-duration: 0.5s, 0.5s, 0.1s;
     -moz-transition-duration: 0.5s, 0.5s, 0.1s;
      -ms-transition-duration: 0.5s, 0.5s, 0.1s;
       -o-transition-duration: 0.5s, 0.5s, 0.1s;
          transition-duration: 0.5s, 0.5s, 0.1s;
  -webkit-transition-timing-function: ease;
     -moz-transition-timing-function: ease;
      -ms-transition-timing-function: ease;
       -o-transition-timing-function: ease;
          transition-timing-function: ease;
}

/* Trigger effect */

.icon.triggered .icon-effect {
  opacity: 1;
  top: -30%;
  left: -30%;
}

/* Active state */

.icon:active .icon-effect {
  opacity: 0;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="icon" id="my_button_div">
    <span class="icon-effect"></span>
</div>

＆＃13;

CSS闪耀效果 - 定时

2 个答案: