Jquery kullanarak bir arka plan rengini nasıl açar / kapatırsınız?

JQuery ile metin içeriğinde nasıl kararabilirim?

Amaç, kullanıcının dikkatini mesaja çekmektir.

Bu tam işlevsellik (bir mesajı vurgulamak için 3 saniyelik parıltı) vurgulama efekti olarak jQuery kullanıcı arayüzünde uygulanır.

https://api.jqueryui.com/highlight-effect/

Renk ve süre değişkendir

Bir öğenin arka plan rengini özel olarak canlandırmak istiyorsanız, jQueryUI çerçevesini eklemeniz gerektiğine inanıyorum. O zaman şunları yapabilirsiniz:

$('#myElement').animate({backgroundColor: '#FF0000'}, 'slow');

jQueryUI, sizin için de yararlı olabilecek bazı yerleşik efektlere sahiptir.

http://jqueryui.com/demos/effect/

Sorunun Jquery ile nasıl yapılacağı olduğunu biliyorum, ancak aynı etkiyi basit css ve sadece biraz jquery ile elde edebilirsiniz ...

Örneğin, 'kutu' sınıfına sahip bir div'iniz var, aşağıdaki css'yi ekleyin

.box {
background-color: black;
-webkit-transition: background 0.5s linear;
-moz-transition: background 0.5s linear;
-ms-transition: background 0.5s linear;
-o-transition: background 0.5s linear;
transition: background 0.5s linear;
}

ve ardından 'kutu vurgulanmış' gibi farklı arka plan rengine sahip başka bir sınıf veya aşağıdaki css ile buna benzer bir şey eklemek için AddClass işlevini kullanın:

.box.highlighted {
  background-color: white;
}

Ben yeni başlayan biriyim ve belki bu yöntemin bazı dezavantajları olabilir ama belki birileri için faydalı olabilir

İşte bir codepen: https://codepen.io/anon/pen/baaLYB

Genellikle .animate () yöntemini rastgele CSS özelliklerini değiştirmek için kullanabilirsiniz, ancak arka plan renkleri için renk eklentisini kullanmanız gerekir . Bu eklentiyi ekledikten sonra $('div').animate({backgroundColor: '#f00'}), rengi değiştirmek için başkalarının belirttiği gibi bir şey kullanabilirsiniz .

Diğerlerinin de yazdığı gibi, bunların bir kısmı jQuery UI kitaplığı kullanılarak da yapılabilir.

Yalnızca jQuery kullanarak (UI kitaplığı / eklentisi yok). JQuery bile kolayca ortadan kaldırılabilir

//Color row background in HSL space (easier to manipulate fading)
$('tr').eq(1).css('backgroundColor','hsl(0,100%,50%');

var d = 1000;
for(var i=50; i<=100; i=i+0.1){ //i represents the lightness
    d  += 10;
    (function(ii,dd){
        setTimeout(function(){
            $('tr').eq(1).css('backgroundColor','hsl(0,100%,'+ii+'%)'); 
        }, dd);    
    })(i,d);
}

Demo: http://jsfiddle.net/5NB3s/2/

• SetTimeout, açıklığı% 50'den% 100'e yükseltir, esasen arka planı beyaz yapar (renginize bağlı olarak herhangi bir değer seçebilirsiniz).
• SetTimeout, bir döngüde düzgün çalışması için anonim bir işleve sarılır ( neden )

Tarayıcı desteğinize bağlı olarak bir css animasyonu kullanabilirsiniz. Tarayıcı desteği CSS animasyonu için IE10 ve üstü. Bu güzel, bu yüzden sadece küçük bir paskalya yumurtası ise jquery UI bağımlılığı eklemenize gerek yok. Sitenizin ayrılmaz bir parçasıysa (diğer bir deyişle IE9 ve aşağısı için gerekli) jquery UI çözümünü kullanın.

.your-animation {
    background-color: #fff !important;
    -webkit-animation: your-animation-name 1s ease 0s 1 alternate !important;
}
//You have to add the vendor prefix versions for it to work in Firefox, Safari, and Opera.
@-webkit-keyframes your-animation-name {
    from { background-color: #5EB4FE;}
    to {background-color: #fff;}
}
-moz-animation: your-animation-name 1s ease 0s 1 alternate !important;
}
@-moz-keyframes your-animation-name {
    from { background-color: #5EB4FE;}
    to {background-color: #fff;}
}
-ms-animation: your-animation-name 1s ease 0s 1 alternate !important;
}
@-ms-keyframes your-animation-name {
    from { background-color: #5EB4FE;}
    to {background-color: #fff;}
}
-o-animation: your-animation-name 1s ease 0s 1 alternate !important;
}
@-o-keyframes your-animation-name {
    from { background-color: #5EB4FE;}
    to {background-color: #fff;}
}
animation: your-animation-name 1s ease 0s 1 alternate !important;
}
@keyframes your-animation-name {
    from { background-color: #5EB4FE;}
    to {background-color: #fff;}
}

Ardından, your-animationsınıfı canlandırmak istediğiniz öğeye ekleyen ve bir renkten diğerine arka plan solmasını tetikleyen bir jQuery tıklama olayı oluşturun :

$(".some-button").click(function(e){
    $(".place-to-add-class").addClass("your-animation");
});

Buna benzer bir şeyi başarmak için süper basit bir jQuery eklentisi yazdım. Gerçekten hafif bir şey istedim (732 bayt küçültülmüş), bu yüzden büyük bir eklenti veya kullanıcı arayüzü eklemek benim için söz konusu değildi. Hâlâ sınırlar biraz zor, bu yüzden geri bildirimlerinizi bekliyoruz.

Eklentiyi buradan kontrol edebilirsiniz: https://gist.github.com/4569265 .

Eklentiyi kullanarak, arka plan rengini değiştirerek ve ardından setTimeoutorijinal arka plan rengine geri dönmek için eklentiyi ateşlemek için bir vurgulama efekti oluşturmak basit bir mesele olacaktır .

Yalnızca basit javascript kullanarak 2 renk arasında geçiş yapmak için:

function Blend(a, b, alpha) {
  var aa = [
        parseInt('0x' + a.substring(1, 3)), 
        parseInt('0x' + a.substring(3, 5)), 
        parseInt('0x' + a.substring(5, 7))
    ];

  var bb = [
        parseInt('0x' + b.substring(1, 3)), 
        parseInt('0x' + b.substring(3, 5)), 
        parseInt('0x' + b.substring(5, 7))
    ];

  r = '0' + Math.round(aa[0] + (bb[0] - aa[0])*alpha).toString(16);
  g = '0' + Math.round(aa[1] + (bb[1] - aa[1])*alpha).toString(16);
  b = '0' + Math.round(aa[2] + (bb[2] - aa[2])*alpha).toString(16);

  return '#'
        + r.substring(r.length - 2)
        + g.substring(g.length - 2)
        + b.substring(b.length - 2);
}

function fadeText(cl1, cl2, elm){
  var t = [];
  var steps = 100;
  var delay = 3000;

  for (var i = 0; i < steps; i++) {
    (function(j) {
         t[j] = setTimeout(function() {
          var a  = j/steps;
          var color = Blend(cl1,cl2,a);
          elm.style.color = color;
         }, j*delay/steps);
    })(i);
  }

  return t;
}

var cl1 = "#ffffff";
var cl2 = "#c00000";
var elm = document.getElementById("note");
T  = fadeText(cl1,cl2,elm);

Kaynak: http://www.pagecolumn.com/javascript/fade_text.htm

javascript, jQuery veya başka bir kitaplık olmadan beyaza dönüşür:

<div id="x" style="background-color:rgb(255,255,105)">hello world</div>
<script type="text/javascript">
var gEvent=setInterval("toWhite();", 100);
function toWhite(){
    var obj=document.getElementById("x");
    var unBlue=10+parseInt(obj.style.backgroundColor.split(",")[2].replace(/\D/g,""));
    if(unBlue>245) unBlue=255;
    if(unBlue<256) obj.style.backgroundColor="rgb(255,255,"+unBlue+")";
    else clearInterval(gEvent)
}
</script>

Yazdırmada sarı eksi mavidir, bu nedenle 255'ten daha az olan 3. rgb öğesi (mavi) ile başlamak sarı vurguyla başlar. Ardından değerin 10+ayarlanması, var unBlueeksi maviyi 255'e ulaşana kadar artırır.