Есть ли способ оживить альфа фон RGBA без jquery.color? - PullRequest
Новая
       80

Есть ли способ оживить альфа фон RGBA без jquery.color?

2 голосов
/ 19 июля 2011

Мне нужен анимированный фон с помощью jQuery's animate () от rgba(255,255,255,0.5) до rgba(255,255,255,0.9) без использования плагина jquery.color и изменения непрозрачности CSS. Цвет фона всегда один и тот же (белый), мне нужно только анимировать rgba's alpha . Кто-нибудь предлагает?

Ответы [ 5 ]

2 голосов
/ 27 марта 2017 
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(...);
}
0 голосов
/ 25 декабря 2016 

$('#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 голосов
/ 19 июля 2011

Примерно так, например?

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

0 голосов
/ 20 марта 2016

Вы можете использовать готовый класс 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 голосов
/ 19 июля 2011

Единственный способ - использовать непрозрачность CSS.Фактически, jQuery animate () также использует его.

...