使用jQuery通过CSS框阴影产生脉冲效果

Question

我正在尝试使用jquery使用CSS盒阴影创建脉冲效果。 我尝试了以下代码，但完全失败了。 我想要实现的是具有盒子阴影的平滑脉冲效果

我尝试过的代码是html

<div class="one">
</div>

的CSS

.one {
    width: 100px;
    height: 100px;
    background: red;
    -webkit-box-shadow: -1px -1px 5px rgba(50, 50, 50, 0.75);
    -moz-box-shadow:    -1px -1px 5px rgba(50, 50, 50, 0.75);
    box-shadow:         -1px -1px 5px rgba(50, 50, 50, 0.75);
}
.two {
    width: 100px;
    height: 100px;
    background: red;
    -webkit-box-shadow: -1px -1px 13px rgba(50, 50, 50, 0.75);
    -moz-box-shadow:    -1px -1px 13px rgba(50, 50, 50, 0.75);
    box-shadow:         -1px -1px 13px rgba(50, 50, 50, 0.75);
}

jQuery的

$("div").setInterval(function() {
   $(this).toggleClass(".two");
}, 1000);

小提琴http://jsfiddle.net/KXp4D/2/

Answer 1

纯CSS示例JSFIDDLE

@-webkit-keyframes shadow {
    0% {box-shadow: -1px -1px 5px rgba(50, 50, 50, 0.75);}
    50% {box-shadow: -1px -1px 13px rgba(50, 50, 50, 0.75);}
    100% {box-shadow: -1px -1px 5px rgba(50, 50, 50, 0.75);}
}
@-moz-keyframes shadow {
    0% {box-shadow: -1px -1px 5px rgba(50, 50, 50, 0.75);}
    50% {box-shadow: -1px -1px 13px rgba(50, 50, 50, 0.75);}
    100% {box-shadow: -1px -1px 5px rgba(50, 50, 50, 0.75);}
}
@keyframes shadow {
    0% {box-shadow: -1px -1px 5px rgba(50, 50, 50, 0.75);}
    50% {box-shadow: -1px -1px 13px rgba(50, 50, 50, 0.75);}
    100% {box-shadow: -1px -1px 5px rgba(50, 50, 50, 0.75);}
}

.one {
    width: 100px;
    height: 100px;
    margin: 10px;
    background: red;
    box-shadow: -1px -1px 5px rgba(50, 50, 50, 0.75);
}
.one:hover {
    -webkit-animation: shadow 1s ease-in-out infinite;
    -moz-animation: shadow 1s ease-in-out infinite;
    animation: shadow 1s ease-in-out infinite;
}

Answer 2

setInterval()不是jQuery函数，而是一个简单的JavaScript函数。

要使用它，您需要将代码更改为

setInterval(function() {
   $("div").toggleClass("two");
}, 1000);

这会起作用，但就像开关一样。 为了使其平滑，可以使用CSS3过渡，如下所示：

transition: all 1s ease;

演示版

请注意，您不需要必要的javascript，这可以在纯CSS3中完成。

Answer 3

setInterval(function() {
   var cl = $("div").hasClass('one') ? 'two' : 'one';
   $("div").attr('class', cl);
}, 1000);

您不能将setInterval添加到对象。 像这样使用

setInterval(function(){
  // do stuff
}, 1000);

小提琴

注意：为实现平滑过渡，我在框阴影上添加了CSS过渡

Answer 4

在小提琴中，您的setInterval方法未正确运行，并且toggle没有正确的参数。 尝试以下方法：

setInterval(function() {
   $("div").toggleClass("one");
   $("div").toggleClass("two");
}, 1000);

Answer 5

这是有效的演示 http://jsfiddle.net/LKXLc/

setInterval(function() {
if( $("div").hasClass("one"))
{
      $("div").removeClass("one").addClass("two");
}
else
{
      $("div").removeClass("two").addClass("one");
}
}, 10);

Answer 6

您可以使用CSS做到这一点

演示版

HTML标记

<a href="#" id="msElem">Click Here</a>

的CSS

@keyframes msPulseEffect {
   0% {
     box-shadow: 0 0 0 0px rgba(0, 0, 0, 0.5);
   }
 100% {
     box-shadow: 0 0 0 30px rgba(0, 0, 0, 0);
   }
 }
 #msElem{
   margin: 30px;
   display: flex;
   justify-content: center;
   align-items: center;
   width: 100px;
   height: 100px;
   color:white;
   background-color: #0078D7;
   border-radius: 50%;
   text-decoration: none;
   animation: msPulseEffect 1s infinite;
 }