تتلاشى لون الخلفية لعلامة سبان مع jQuery

Question

أحاول أن أتلاشى لون خلفية علامة تمتد باستخدام jQuery للتأكيد عند حدوث تغيير. كنت أفكر في أن الشفرة ستكون سماط مثل ما يلي داخل معالج النقر، ولكن لا يمكنني أن أبدو أنها تعمل. هل تستطيع أن تريني أين ذهبت؟ شكرا روس.

$("span").fadeOut("slow").css("background-color").val("FFFF99");

---

هذا أفضل، ولكن الآن يتلاشى كل لون الخلفية من العلامة SPAN والقيمة النصية لعلامة SPAN أيضا. أحاول فقط تتلاشى لون الخلفية وترك النص مرئيا. يمكن أن يتم ذلك؟

Answer 1

أوه، لم أكن أدرك أنك تريد أن تتلاشى اللون! حسنا، لذلك تحتاج إلى التحقق من البرنامج المساعد Color JQuery:

http:/plugins.jquery.com/project/color.

https://github.com/jquery/jquery-color/

وهنا قسم مفيد آخر من موقع مستقبل المستندات:

http://docs.jquery.com/release:jquery_1.2/effects#color_animations.

لم أفعل ذلك بالفعل، لذلك لن أحاول أن أعطيك رمز، لكنني أتصور أن يمنحك البرنامج المساعد الملون الوظيفة التي تحتاجها.

Answer 2

يمكن القيام به مع البرنامج المساعد الرسوم المتحركة. وبعد كنت تفعل بعد ذلك شيء مثل

$('span').animate({'backgroundColor' : '#ffff99'});

Answer 3

إذا كان استخدام JQ النقي للتلاشي، فلا تعمل الخلفية بدون مساعد، فهناك طريقة ذكية (على الرغم من أنها غير تدريجية محسنة) للقيام بذلك مع CSS3.

ستطبق هذه الوظيفة سمة "الانتقال" لعنصر معين عبر CSS التالي، يتم إعطاء العنصر لون خلفية يتلاشى.

في حال كنت تريد أن يكون هذا مثل الموجة ("انظر هنا!")، بعد تأخير نصف ثانية، تتم في قائمة الانتظار في قائمة الانتظار لتحويل العنصر إلى اللون الأبيض.

أساسا JQ فقط يومض العنصر إلى لون واحد، ثم العودة إلى اللون الأبيض. CSS3 تعتني باللاخلاط.

//reusable function to make fading colored hints
function fadeHint(divId,color) {
    switch(color) {
        case "green":
        color = "#17A255";
        break;

        case "blue":
        color = "#1DA4ED";
        break;

        default: //if "grey" or some misspelled name (error safe).
        color = "#ACACAC";
        break;
    }

    //(This example comes from a project which used three main site colors: 
    //Green, Blue, and Grey)

    $(divId).css("-webkit-transition","all 0.6s ease")
    .css("backgroundColor","white")
    .css("-moz-transition","all 0.6s ease")
    .css("-o-transition","all 0.6s ease")
    .css("-ms-transition","all 0.6s ease")
    /* Avoiding having to use a jQ plugin. */

    .css("backgroundColor",color).delay(200).queue(function() {
        $(this).css("backgroundColor","white"); 
        $(this).dequeue(); //Prevents box from holding color with no fadeOut on second click.
    }); 
    //three distinct colors of green, grey, and blue will be set here.
}

Answer 4

يمكن القيام بذلك باستخدام JQuery (أو أي ليب) و Simple CSS Hack:

#wrapping-div {
 position:relative;
 z-index:1;
}
#fadeout-div {
 height:100%;
 width:100%;
 background-color: #ffd700;
 position:absolute;
 top:0;
 left:0;
 z-index:-1
}

لغة البرمجة:

<div id="wrapping-div">
  <p>This is some text</p>
  <p>This is some text</p>
  <p>This is some text</p>
  <div id="fadeout-div"></div>
</div>

بعد ذلك، كل ما عليك فعله هو:

$("#fadeout-div").fadeOut(1100);

سهل جدا! انظر هذا في العمل: http://jsfiddle.net/matthewbj/jcsyp/

Answer 5

جرب هذا

    $(this).animate({backgroundColor:"green"},  100);
    $(this).animate({backgroundColor:"white" },  1000);

Answer 6

قد يكون متأخرا للإجابة، ولكن حل مستقيم إجابتك.

 $('span').css('background-color','#<from color>').animate({backgroundColor: '#<to color>'},{duration:4000});

بسيط. لا حاجة إلى البرنامج المساعد JQueryui وأدوات الطرف الثالث وجميع.

Answer 7

لم أرغب في استخدام مكون إضافي، لذا لإخراج خلفية داخل وخارج، قمت بتضمين هذا لفئة DIV التي تلاشت الخلفية

.div-to-fade {
    -webkit-transition:background 1s;
    -moz-transition:background 1s;
    -o-transition:background 1s;
    transition:background 1s
}

jquery الذي هو في زر النقر

$('.div-to-fade').css('background', 'rgb(70, 70, 70)');
setTimeout(function(){$('.div-to-fade').css('background', '')}, 1000);

سيؤدي ذلك إلى لون خلفية اللون الرمادي الفاتح ثم تتلاشى مرة أخرى إلى لون الأصل آمل أن يسهم هذا

Answer 8

هذا هو السبب في استدعاء Fadeout في علامة SPAN. للحصول على خلفية Fade Animation يجب عليك استخدامها:

$('span').animate({'backgroundColor' : '#ffff99'});

كما أشار من قبل ميشاك. هناك طريقة أخرى يمكن أن تكون مثل هذا:

$("span").fadeTo(0.5,"slow", function () {
  $(this).css("background-color", "#FFFF99");
  $(this).fadeIn("slow");
});

سوف تتلاشى الرمز أعلاه إلى 50٪ علامة تمتد بأكملها، ثم يغير الخلفية و fadein. ليس ما كنت تبحث عنه، ولكن يخلق رسوم متحركة للكهرباء دون اعتمادا من الإضافات JQuery الأخرى؛)

Answer 9

أحدث أعمال JQuery UI تتيح لك تحويل لون الخلفية على معظم الكائنات. انظر هنا : http://jqueryui.com/demos/animate/

أما بالنسبة للرجل يسأل عن صنع خلفية شفافة في Roll-Over للكشف عن صورة لن تكون أكثر بساطة لبناءها مثل صورة مسج عادية مرر مثل الأشخاص الذين يستخدمون الصور نافذ الصور؟

Answer 10

سترغب في استخدام بناء الجملة هذا:

$("span").fadeOut("slow").css("background-color", "#FFFF99");

Answer 11

هذه هي الطريقة التي قمت بإصلاحها لقائمتي مع تحوم:

CSS:

ul {background-color:#f3f3f3;}
li:hover {background-color: #e7e7e7}

jQuery:

$(document).ready(function () {
    $('li').on('touchstart', function () { $(this).css('background-color', ''); });
    $('li').on('touchend', function () { $(this).css('background-color', 'inherit'); });
});

Answer 12

حل آخر بدون jquery ui. https://stackoverflow.com/a/22590958/781695.

//Color row background in HSL space (easier to manipulate fading)
$('span').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(){
            $('span').css('backgroundColor','hsl(0,100%,'+ii+'%)'); 
        }, dd);    
    })(i,d);
}

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