ทำให้สีพื้นหลังของแท็ก span จางลงด้วย JQuery

โอ้ ฉันไม่รู้ว่าคุณต้องการทำให้สีจางลง! ตกลง ดังนั้นคุณต้องตรวจสอบปลั๊กอินสี jQuery:

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

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

และนี่คืออีกส่วนที่เป็นประโยชน์ของไซต์เอกสาร jQuery:

http://docs.jquery.com/Release:jQuery_1.2/Effects#Color_Animations

ฉันไม่เคยทำสิ่งนี้มาก่อน ดังนั้นฉันจะไม่พยายามให้โค้ดแก่คุณ แต่ฉันคิดว่าปลั๊กอินสีจะให้ฟังก์ชันที่คุณต้องการ

ซึ่งสามารถทำได้โดยใช้ปลั๊กอินภาพเคลื่อนไหวสี จากนั้นคุณจะทำอะไรบางอย่างเช่น

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

หากการใช้ jQ ล้วนๆ เพื่อเฟดพื้นหลังจะไม่ทำงานหากไม่มีปลั๊กอิน ก็มีวิธีที่ชาญฉลาด (แม้ว่าจะไม่ได้รับการปรับปรุงอย่างต่อเนื่อง) ในการดำเนินการนี้ด้วย CSS3

ฟังก์ชันนี้จะใช้แอตทริบิวต์ "การเปลี่ยนแปลง" กับองค์ประกอบที่กำหนดผ่านทาง CSS ถัดไป องค์ประกอบจะได้รับสีพื้นหลังที่ 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.
}

ซึ่งสามารถทำได้ด้วย jQuery (หรือ lib ใดๆ) และแฮ็ค CSS แบบง่ายๆ:

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

HTML:

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

ลองสิ่งนี้

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

อาจจะตอบช้า แต่เป็นคำตอบที่ตรงใจคุณ

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

เรียบง่าย. ไม่จำเป็นต้องใช้ปลั๊กอิน jqueryUI เครื่องมือของบุคคลที่สามและทั้งหมด

ฉันไม่ต้องการใช้ปลั๊กอิน ดังนั้นเพื่อให้พื้นหลังจางลง ฉันจึงรวมสิ่งนี้ไว้สำหรับคลาส 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);

นี่จะทำให้พื้นหลังเป็นสีเทาอ่อนแล้วจางหายไปเป็นสีเดิม ฉันหวังว่านี่จะช่วยได้

นั่นเป็นสาเหตุที่คุณเรียก fadeOut บนแท็ก span เพื่อให้ได้ภาพเคลื่อนไหวพื้นหลังจางคุณควรใช้:

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

ดังที่มิชาคชี้ไว้ วิธีอื่นอาจเป็นดังนี้:

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

โค้ดด้านบนจะจางหายไปถึง 50% ของแท็ก span ทั้งหมด จากนั้นเปลี่ยนพื้นหลังและ fadeIn ไม่ใช่สิ่งที่คุณกำลังมองหา แต่สร้างแอนิเมชั่นหลอกลวงโดยไม่ต้องพึ่งปลั๊กอิน jquery อื่น ๆ ;)

ธุรกิจ jQuery UI ใหม่ล่าสุดช่วยให้คุณสามารถเปลี่ยนสีพื้นหลังบนวัตถุส่วนใหญ่ได้ ดูที่นี่: http://jqueryui.com/demos/animate/

สำหรับผู้ชายที่ถามถึงการทำให้พื้นหลังโปร่งใสเมื่อโรลโอเวอร์เพื่อแสดงรูปภาพ จะไม่ง่ายกว่าที่จะสร้างมันเหมือนการโรลโอเวอร์รูปภาพ jQuery ทั่วไปเหมือนกับที่คนใช้ในการสลับรูปภาพนำทางหรือไม่

คุณจะต้องใช้ไวยากรณ์นี้:

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

นี่คือวิธีที่ฉันแก้ไขรายการของฉันด้วยการโฮเวอร์:

ซีเอสเอส:

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

เจคิวรี่:

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

โซลูชันอื่น ไม่มี 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/