1
我需要動畫背景jQuery的動畫（）從rgba(255,255,255,0.5)到rgba(255,255,255,0.9)而不使用jquery.color插件&更改CSS不透明度。 背景顏色總是相同的（白色），我只需要動畫效果只有rgba的阿爾法。 有什麼建議嗎？有沒有一種方法來爲沒有jquery.color的rgba背景設置alpha值？
A
回答
0
唯一的方法是使用CSS不透明度。實際上jQuery的animate（）也使用它。
0
像這樣的東西例如？
0
您可以使用預製的CSS類所需的動畫，然後使用jQuery來打開該類/關。
這裏的工作小提琴：https://jsfiddle.net/syoels/moL1q6ea/
$('#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>+0
它實際上可能很多更短 - 但我爲動畫提供了跨瀏覽器支持 – syoels
0
$('#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>
2
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+')'});
}
});
，也許你也需要：
if (!$obj.is(':animated')) {
$obj.animate(...);
}
相關問題
- 1. will_paginate有沒有一種方法來設置per_page爲「所有」
- 2. 有沒有一種方法來設置一個int爲001
- 3. 背景不透明沒有RGBA爲Sass
- 4. 有沒有一種方法來設置爲CABasicAnimation動畫步數？
- 5. 有沒有一種方法來一次爲多個對象設置方法？
- 6. 有沒有一種方法來設置IE的範圍控制？
- 7. 有沒有一種方法來設置javascript的日誌記錄閾值
- 8. 有沒有一種方法來計算一些不同的值？
- 9. 有沒有一種方式來設置HTML5的範圍控制？
- 10. 有沒有一種方法來檢測何時通過jquery設置值？
- 11. 有沒有一種方法來操縱包含JS沒有eval（）？
- 12. 有沒有一種方法來設置actionBarTabTextStyle專門爲堆疊操作欄？
- 13. CoreData - 有沒有一種很好的方法來放置物品？
- 14. 有沒有一種方法來比較PHP中的多個值
- 15. 有沒有一種方法來定義鍵值的大小？
- 16. WPF Button ...有沒有一種方法來獨立於樣式聲明設置背景顏色
- 17. 有沒有一種方法來設置默認的一天的strtotime（ 「YYYY-MM」）
- 18. 設置沒有css的背景圖片
- 19. 有沒有一種方法來有條件地設置android活動屬性？
- 20. 有沒有更好的方法來使背景圖像變暗？
- 21. 有沒有一種方法來設計鏈接，如aristo按鈕？
- 22. 有沒有辦法設置黑莓的背景顏色？
- 23. 有沒有一種方法來配置WCF回調節流？
- 24. 背景尺寸沒有設置在ie
- 25. 有沒有辦法爲sampler2D紋理設置alpha通道顏色？
- 26. iPhone：有沒有一種方法來loadNumber並有一個reuseIdentifier？
- 27. 有沒有一種安全的方法來設置mysql root密碼？
- 28. 有沒有一種方法來在編程中設置IB的約束？
- 29. 有沒有一種方法來設置參考交易paypal的休息API
- 30. 有沒有一種方法來設置js中的單個數組元素
這不會影響只是背景的不透明度不幸 – Paulpro
@Molecule，@PaulPRO：在這種情況下，我需要改變不透明度爲1，而不是0.9吧？ – Ken
@PaulPRO，我不知道如何改變背景的不透明度。但是，它可能會通過醜陋的黑客來完成，例如添加具有相同大小的額外div，需要背景，並使用絕對定位和zIndex位於目標塊後面。 –