Question

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

我尝试的代码是 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;

Demo

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

Answer 3

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

您无法将setInterval添加到对象。像

一样使用它

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

FIDDLE

注意：对于平滑过渡，我在box-shadow上添加了CSS过渡

Answer 4

在小提琴中，setInterval方法运行不正常且toggle没有正确的参数。试试这个：

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

Answer 5

以下是工作 DEMO 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做到这一点

DEMO

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;
 }

使用jQuery使用CSS box-shadow进行脉冲效果

6 个答案: