Question

我需要使用jQuery的animate（）从rgba(255,255,255,0.5)到rgba(255,255,255,0.9)的动画背景，而不使用jquery.color插件＆amp;改变CSS不透明度。背景颜色总是相同的（白色），我只需要动画rgba的 alpha 。有什么建议吗？

Answer 1

var $obj = $('.selector');
$obj.css({volume: 50});
$obj.animate({volume: 90}, {
    duration: 200, // default 400
    step: function (n, t) {
        $(t.elem).css({background: 'rgba(255,255,255,'+n/100+')'});
    }
});

jquery animate

也许你还需要：

if (!$obj.is(':animated')) {
    $obj.animate(...);
}

Answer 2

唯一的方法是使用css不透明度。事实上，jQuery的animate（）也使用它。

Answer 3

例如这样的东西？

http://jsfiddle.net/YZKKp/13/

Answer 4

您可以使用带有所需动画的预制CSS类，然后使用jQuery打开/关闭该类。

这是一个工作小提琴：https://jsfiddle.net/syoels/moL1q6ea/

＆＃13;

$('#button1').click(function() {
  $('.square').removeClass('fadeMeIn').addClass('fadeMeOut');
});

$('#button2').click(function() {
  $('.square').removeClass('fadeMeOut').addClass('fadeMeIn');
});

＆＃13;

.square {
  height: 50px;
  width: 50px;
  margin: 10px;
  background-color: rgba(255, 0, 0, 0.8);
}
.fadeMeOut {
  -webkit-animation: faeOutRGBA 1s linear;
  -moz-animation: faeOutRGBA 1s linear;
  -o-animation: faeOutRGBA 1s linear;
  animation: faeOutRGBA 1s linear;
  background-color: rgba(255, 0, 0, 0);
}
.fadeMeIn {
  -webkit-animation: faeInRGBA 1s linear;
  -moz-animation: faeInRGBA 1s linear;
  -o-animation: faeInRGBA 1s linear;
  animation: faeInRGBA 1s linear;
  background-color: rgba(255, 0, 0, 0.8);
}
@-webkit-keyframes faeOutRGBA {
  0% {
    background-color: rgba(255, 0, 0, 0.8)
  }
  100% {
    background-color: rgba(255, 0, 0, 0);
  }
}
@-moz-keyframes faeOutRGBA {
  0% {
    background-color: rgba(255, 0, 0, 0.8);
  }
  100% {
    background-color: rgba(255, 0, 0, 0);
  }
}
@-o-keyframes faeOutRGBA {
  0% {
    background-color: rgba(255, 0, 0, 0.8);
  }
  100% {
    background-color: rgba(255, 0, 0, 0);
  }
}
@keyframes faeOutRGBA {
  0% {
    background-color: rgba(255, 0, 0, 0.8);
  }
  100% {
    background-color: rgba(255, 0, 0, 0);
  }
  ;
}
@-webkit-keyframes faeInRGBA {
  0% {
    background-color: rgba(255, 0, 0, 0)
  }
  100% {
    background-color: rgba(255, 0, 0, 0.8);
  }
}
@-moz-keyframes faeInRGBA {
  0% {
    background-color: rgba(255, 0, 0, 0);
  }
  100% {
    background-color: rgba(255, 0, 0, 0.8);
  }
}
@-o-keyframes faeInRGBA {
  0% {
    background-color: rgba(255, 0, 0, 0);
  }
  100% {
    background-color: rgba(255, 0, 0, 0.8);
  }
}
@keyframes faeInRGBA {
  0% {
    background-color: rgba(255, 0, 0, 0);
  }
  100% {
    background-color: rgba(255, 0, 0, 0.8);
  }
  ;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="square"></div>
<button id="button1">fade out</button>
<button id="button2">fade in</button>

＆＃13;

Answer 5

$('#button1').click(function() {
  $('.square').removeClass('fadeMeIn').addClass('fadeMeOut');
});

$('#button2').click(function() {
  $('.square').removeClass('fadeMeOut').addClass('fadeMeIn');
});

.square {
  height: 50px;
  width: 50px;
  margin: 10px;
  background-color: rgba(255, 0, 0, 0.8);
}
.fadeMeOut {
  -webkit-animation: faeOutRGBA 1s linear;
  -moz-animation: faeOutRGBA 1s linear;
  -o-animation: faeOutRGBA 1s linear;
  animation: faeOutRGBA 1s linear;
  background-color: rgba(255, 0, 0, 0);
}
.fadeMeIn {
  -webkit-animation: faeInRGBA 1s linear;
  -moz-animation: faeInRGBA 1s linear;
  -o-animation: faeInRGBA 1s linear;
  animation: faeInRGBA 1s linear;
  background-color: rgba(255, 0, 0, 0.8);
}
@-webkit-keyframes faeOutRGBA {
  0% {
    background-color: rgba(255, 0, 0, 0.8)
  }
  100% {
    background-color: rgba(255, 0, 0, 0);
  }
}
@-moz-keyframes faeOutRGBA {
  0% {
    background-color: rgba(255, 0, 0, 0.8);
  }
  100% {
    background-color: rgba(255, 0, 0, 0);
  }
}
@-o-keyframes faeOutRGBA {
  0% {
    background-color: rgba(255, 0, 0, 0.8);
  }
  100% {
    background-color: rgba(255, 0, 0, 0);
  }
}
@keyframes faeOutRGBA {
  0% {
    background-color: rgba(255, 0, 0, 0.8);
  }
  100% {
    background-color: rgba(255, 0, 0, 0);
  }
  ;
}
@-webkit-keyframes faeInRGBA {
  0% {
    background-color: rgba(255, 0, 0, 0)
  }
  100% {
    background-color: rgba(255, 0, 0, 0.8);
  }
}
@-moz-keyframes faeInRGBA {
  0% {
    background-color: rgba(255, 0, 0, 0);
  }
  100% {
    background-color: rgba(255, 0, 0, 0.8);
  }
}
@-o-keyframes faeInRGBA {
  0% {
    background-color: rgba(255, 0, 0, 0);
  }
  100% {
    background-color: rgba(255, 0, 0, 0.8);
  }
}
@keyframes faeInRGBA {
  0% {
    background-color: rgba(255, 0, 0, 0);
  }
  100% {
    background-color: rgba(255, 0, 0, 0.8);
  }
  ;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="square"></div>
<button id="button1">fade out</button>
<button id="button2">fade in</button>

有没有办法在没有jquery.color的情况下为rgba背景的alpha动画？

5 个答案: