كيف تتلاشى في / خارج لون الخلفية باستخدام jquery؟

Question

كيف تتلاشى في محتوى النص مع jquery؟

النقطة هي رسم انتباه المستخدم إلى الرسالة.

Answer 1

يتم تنفيذ هذه الوظيفة الدقيقة (3 ثانية توهج لتسليط الضوء على رسالة) في jquery ui كأثر تسليط الضوء

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

اللون والمدار متغير

Answer 2

إذا كنت ترغب في تحريك تصوير لون الخلفية على وجه التحديد عنصر، فأعتقد أنك بحاجة إلى تضمين إطار JQueryui. ثم يمكنك القيام به:

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

يحتوي Jqueryui على بعض الآثار المدمجة التي قد تكون مفيدة لك أيضا.

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

Answer 3

أعلم أن السؤال هو كيفية القيام بذلك مع jQuery، ولكن يمكنك تحقيق نفس التأثير مع CSS بسيطة ومجرد مسج صغير ...

على سبيل المثال، لديك DIV مع فئة "مربع"، إضافة CSS التالية

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

ثم استخدم وظيفة AddClass لإضافة فئة أخرى مع لون خلفية مختلفة مثل "مربع تم إبراز المربع" أو شيء من هذا القبيل مع CSS التالية:

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

أنا مبتدئ وربما هناك بعض عيوب هذه الطريقة ولكن ربما تكون مفيدة لشخص ما

إليك Codepen:https://codepen.io/anon/pen/baalyb.

Answer 4

عادة يمكنك استخدام (). () طريقة لمعالجة خصائص CSS التعسفي، ولكن لألوان الخلفية تحتاج إلى استخدام ملون البرنامج المساعد. وبعد بمجرد تضمين هذا البرنامج المساعد، يمكنك استخدام شيء مثل الآخرين قد أشروا $('div').animate({backgroundColor: '#f00'}) لتغيير اللون.

كما كتب آخرون، يمكن القيام ببعض هذا باستخدام مكتبة JQuery UI أيضا.

Answer 5

باستخدام JQuery فقط (لا مكتبة UI / البرنامج المساعد). حتى jQuery يمكن القضاء عليها بسهولة

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

التجريبي: http://jsfiddle.net/5nb3s/2/

• يزيد Settimeout من Lightness من 50٪ إلى 100٪، مما يجعل خلفية الخلفية بشكل أساسي (يمكنك اختيار أي قيمة اعتمادا على لونك).
• يتم ملف settimeout في وظيفة مجهولة للعمل بشكل صحيح في حلقة ( السبب )

Answer 6

اعتمادا على دعم المتصفح الخاص بك، يمكنك استخدام الرسوم المتحركة CSS. دعم المتصفح IE10 وما فوق لرسوم الرسوم المتحركة CSS. هذا جميل حتى لا تضطر إلى إضافة تبعية jQuery ui إذا كانت بيضة عيد الفصح الصغيرة فقط. إذا كان جزءا لا يتجزأ من موقعك (AKA اللازمة ل IE9 وما يلي)، فانتقل إلى حل JQuery UI.

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

التالي إنشاء جيس انقر فوق حدث يضيف your-animation فئة إلى العنصر الذي ترغب في تحريكه، مما يؤدي إلى تلاشي الخلفية من لون إلى آخر:

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

Answer 7

لقد كتبت برنامج مسج بسيط للغاية لإنجاز شيء مشابه لهذا. أردت شيئا خفيف الوزن حقا (إنه مصغر 732 بايت)، لذلك، بما في ذلك البرنامج المساعد كبير أو UI كان خارج السؤال بالنسبة لي. لا يزال القليل قليلا حول الحواف، لذلك ردود الفعل موضع ترحيب.

يمكنك الخروج من البرنامج المساعد هنا: https:/gist.github.com/4569265..

باستخدام البرنامج المساعد، سيكون الأمر مسألة بسيطة لإنشاء تأثير أبرز عن طريق تغيير لون الخلفية ثم إضافة setTimeout لإطلاق البرنامج المساعد للتلاشي مرة أخرى إلى لون الخلفية الأصلية.

Answer 8

للتلاشي بين 2 ألوان باستخدام جافا سكريبت بسيط فقط:

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

مصدر: http://www.pagecolumn.com/javascript/fade_text.htm.

Answer 9

يتلاشى جافا سكريبت إلى الأبيض دون جيس أو مكتبة أخرى:

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

في الطباعة، الأصفر ناقص الأزرق، لذلك بدءا من عنصر RGB الثالث (الأزرق) عند أقل من 255 يبدأ مع تسليط الضوء الأصفر. ثم 10+ في وضع var unBlue قيمة تزيد ناقص الأزرق حتى يصل إلى 255.