เอฟเฟกต์สีเหลืองจางด้วย JQuery

ฉันต้องการใช้สิ่งที่คล้ายกับเอฟเฟกต์ Yellow Fade ของ 37Signals

ฉันใช้ Jquery 1.3.2

รหัส

(function($) {
   $.fn.yellowFade = function() {
    return (this.css({backgroundColor: "#ffffcc"}).animate(
            {
                backgroundColor: "#ffffff"
            }, 1500));
   }
 })(jQuery);

และสายถัดไปจะแสดงสีเหลืองทำให้ DOM elment จางลงด้วยรหัสกล่อง

$("#box").yellowFade();

แต่มันทำให้เป็นสีเหลืองเท่านั้น ไม่มีพื้นหลังสีขาวหลังจาก 15,000 มิลลิวินาที

มีความคิดว่าทำไมมันถึงไม่ทำงาน?

สารละลาย

คุณสามารถใช้ได้:

$("#box").effect("highlight", {}, 1500);

แต่คุณจะต้องรวม:

effects.core.js
effects.highlight.js

ฟังก์ชันนี้เป็นส่วนหนึ่งของ jQuery effects.core.js :

$("#box").effect("highlight", {}, 1500);

ตามที่ Steerpike ได้ระบุไว้ในความคิดเห็นจำเป็นต้องรวมeffects.core.jsและeffects.highlight.jsเพื่อที่จะใช้สิ่งนี้

ฉันชอบคำตอบของ Sterling Nichols เนื่องจากมีน้ำหนักเบาและไม่ต้องใช้ปลั๊กอิน อย่างไรก็ตามฉันพบว่ามันใช้ไม่ได้กับองค์ประกอบลอย (เช่นเมื่อองค์ประกอบเป็น "float: right") ดังนั้นฉันจึงเขียนโค้ดใหม่เพื่อแสดงไฮไลต์อย่างถูกต้องไม่ว่าองค์ประกอบจะอยู่ในตำแหน่งใดในหน้า:

jQuery.fn.highlight = function () {
    $(this).each(function () {
        var el = $(this);
        $("<div/>")
        .width(el.outerWidth())
        .height(el.outerHeight())
        .css({
            "position": "absolute",
            "left": el.offset().left,
            "top": el.offset().top,
            "background-color": "#ffff99",
            "opacity": ".7",
            "z-index": "9999999"
        }).appendTo('body').fadeOut(1000).queue(function () { $(this).remove(); });
    });
}

ไม่บังคับ:
ใช้รหัสต่อไปนี้หากคุณต้องการจับคู่รัศมีขอบขององค์ประกอบ:

jQuery.fn.highlight = function () {
    $(this).each(function () {
        var el = $(this);
        $("<div/>")
        .width(el.outerWidth())
        .height(el.outerHeight())
        .css({
            "position": "absolute",
            "left": el.offset().left,
            "top": el.offset().top,
            "background-color": "#ffff99",
            "opacity": ".7",
            "z-index": "9999999",
            "border-top-left-radius": parseInt(el.css("borderTopLeftRadius"), 10),
            "border-top-right-radius": parseInt(el.css("borderTopRightRadius"), 10),
            "border-bottom-left-radius": parseInt(el.css("borderBottomLeftRadius"), 10),
            "border-bottom-right-radius": parseInt(el.css("borderBottomRightRadius"), 10)
        }).appendTo('body').fadeOut(1000).queue(function () { $(this).remove(); });
    });
}

ไลบรารีเอฟเฟกต์ jQuery จะเพิ่มค่าใช้จ่ายที่ไม่จำเป็นให้กับแอปของคุณ คุณสามารถทำสิ่งเดียวกันได้ด้วย jQuery เท่านั้น http://jsfiddle.net/x2jrU/92/

jQuery.fn.highlight = function() {
   $(this).each(function() {
        var el = $(this);
        el.before("<div/>")
        el.prev()
            .width(el.width())
            .height(el.height())
            .css({
                "position": "absolute",
                "background-color": "#ffff99",
                "opacity": ".9"   
            })
            .fadeOut(500);
    });
}

$("#target").highlight();

กำหนด CSS ของคุณดังนี้:

@-webkit-keyframes yellowfade {
    from { background: yellow; }
    to { background: transparent; }
}

@-moz-keyframes yellowfade {
    from { background: yellow; }
    to { background: transparent; }
}

.yft {
    -webkit-animation: yellowfade 1.5s;
       -moz-animation: yellowfade 1.5s;
            animation: yellowfade 1.5s;
}

และเพิ่มคลาสyftในรายการใดก็ได้$('.some-item').addClass('yft')

การสาธิต: http://jsfiddle.net/Q8KVC/528/

(function($) {
  $.fn.yellowFade = function() {
    this.animate( { backgroundColor: "#ffffcc" }, 1 ).animate( { backgroundColor: "#ffffff" }, 1500 );
  }
})(jQuery);

ควรทำเคล็ดลับ ตั้งเป็นสีเหลืองแล้วจางเป็นสีขาว

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

คำตอบทั้งหมดที่นี่ใช้ปลั๊กอินนี้ แต่ไม่มีใครพูดถึง

จริงๆแล้วฉันมีวิธีแก้ปัญหาที่ต้องการ jQuery 1.3x เท่านั้นและไม่มีปลั๊กอิน aditionnal

ขั้นแรกให้เพิ่มฟังก์ชันต่อไปนี้ในสคริปต์ของคุณ

function easeInOut(minValue,maxValue,totalSteps,actualStep,powr) {
    var delta = maxValue - minValue;
    var stepp = minValue+(Math.pow(((1 / totalSteps)*actualStep),powr)*delta);
    return Math.ceil(stepp)
}

function doBGFade(elem,startRGB,endRGB,finalColor,steps,intervals,powr) {
    if (elem.bgFadeInt) window.clearInterval(elem.bgFadeInt);
    var actStep = 0;
    elem.bgFadeInt = window.setInterval(
        function() {
            elem.css("backgroundColor", "rgb("+
                easeInOut(startRGB[0],endRGB[0],steps,actStep,powr)+","+
                easeInOut(startRGB[1],endRGB[1],steps,actStep,powr)+","+
                easeInOut(startRGB[2],endRGB[2],steps,actStep,powr)+")"
            );
            actStep++;
            if (actStep > steps) {
            elem.css("backgroundColor", finalColor);
            window.clearInterval(elem.bgFadeInt);
            }
        }
        ,intervals)
}

จากนั้นเรียกใช้ฟังก์ชันโดยใช้สิ่งนี้:

doBGFade( $(selector),[245,255,159],[255,255,255],'transparent',75,20,4 );

ฉันจะให้คุณเดาพารามิเตอร์มันค่อนข้างอธิบายตัวเองได้ พูดตามตรงว่าสคริปต์ไม่ได้มาจากฉันฉันเอามันไปที่หน้าหนึ่งแล้วเปลี่ยนมันเพื่อให้มันใช้งานได้กับ jQuery ล่าสุด

หมายเหตุ: ทดสอบบน firefox 3 และ ie 6 (ใช่มันใช้ได้กับสิ่งเก่า ๆ ด้วย)

function YellowFade(selector){
   $(selector)
      .css('opacity', 0)
      .animate({ backgroundColor: 'Yellow', opacity: 1.0 }, 1000)
      .animate({ backgroundColor: '#ffffff', opacity: 0.0}, 350, function() {
             this.style.removeAttribute('filter');
              });
}

บรรทัดthis.style.removeAttribute('filter')นี้มีไว้สำหรับจุดบกพร่องในการลบรอยหยักใน IE

ตอนนี้โทรหา YellowFade จากทุกที่และส่งตัวเลือกของคุณ

YellowFade('#myDivId');

เครดิต : Phil Haack มีการสาธิตที่แสดงวิธีการทำเช่นนี้ เขากำลังทำการสาธิตบน JQuery และ ASPNet MVC

ลองดูวิดีโอนี้

อัปเดต : คุณดูวิดีโอหรือไม่? ลืมพูดถึงเรื่องนี้ต้องใช้ปลั๊กอิน JQuery.Color

ฉันเกลียดการเพิ่ม 23kb เพียงเพื่อเพิ่ม effects.core.js และ effects.highlight.js ดังนั้นฉันจึงเขียนสิ่งต่อไปนี้ มันเลียนแบบพฤติกรรมโดยใช้ fadeIn (ซึ่งเป็นส่วนหนึ่งของ jQuery เอง) เพื่อ 'แฟลช' องค์ประกอบ:

$.fn.faderEffect = function(options){
    options = jQuery.extend({
        count: 3, // how many times to fadein
        speed: 500, // spped of fadein
        callback: false // call when done
    }, options);

    return this.each(function(){

        // if we're done, do the callback
        if (0 == options.count) 
        {
            if ( $.isFunction(options.callback) ) options.callback.call(this);
            return;
        }

        // hide so we can fade in
        if ( $(this).is(':visible') ) $(this).hide();

        // fade in, and call again
        $(this).fadeIn(options.speed, function(){
            options.count = options.count - 1; // countdown
            $(this).faderEffect(options); 
        });
    });
}

แล้วเรียกมันด้วย $ ('. item'). faderEffect ();

นี่คือทางออกสำหรับปัญหาของฉัน มันใช้งานได้ดีเยี่ยม มันผ่านการตรวจสอบข้อผิดพลาด jslint และยังทำงานได้ดีใน IE8 และ IE9 แน่นอนคุณสามารถปรับแต่งเพื่อยอมรับรหัสสีและการโทรกลับได้:

jQuery.fn.highlight = function(level) {

  highlightIn = function(options){

    var el = options.el;
    var visible = options.visible !== undefined ? options.visible : true;

    setTimeout(function(){
      if (visible) {
        el.css('background-color', 'rgba('+[255, 64, 64]+','+options.iteration/10+')');
        if (options.iteration/10 < 1) {
          options.iteration += 2;
          highlightIn(options);
        }
      } else {
        el.css('background-color', 'rgba('+[255, 64, 64]+','+options.iteration/10+')');
        if (options.iteration/10 > 0) {
          options.iteration -= 2;
          highlightIn(options);
        } else {
          el.css('background-color', '#fff');
        }
      }
    }, 50);
  };

  highlightOut = function(options) {
    options.visible = false;
    highlightIn(options);
  };

  level = typeof level !== 'undefined' ? level : 'warning';
  highlightIn({'iteration': 1, 'el': $(this), 'color': level});
  highlightOut({'iteration': 10, 'el': $(this), 'color': level});
};

นี่เป็นตัวเลือกที่ไม่ใช่ jQuery ที่คุณสามารถใช้เพื่อเอฟเฟกต์สีจางได้ ในอาร์เรย์ "สี" คุณจะต้องเพิ่มสีการเปลี่ยนแปลงที่คุณต้องการตั้งแต่สีเริ่มต้นจนถึงสีสุดท้าย คุณสามารถเพิ่มสีได้มากเท่าที่คุณต้องการ

   <html lang="en">
   <head>
   <script type="text/javascript">
  //###Face Effect for a text box#######

var targetColor;
var interval1;
var interval2;
var i=0;
var colors = ["#FFFF00","#FFFF33","#FFFF66","#FFFF99","#FFFFCC","#FFFFFF"];

function changeColor(){
    if (i<colors.length){
        document.getElementById("p1").style.backgroundColor=colors[i];
        i++;
    } 
    else{
        window.clearInterval(interval1);
        i=0;
    }
}
addEventListener("load",function(){
    document.getElementById("p1").addEventListener("click",function(e){
        interval1=setInterval("changeColor()",80);              

    })
});
</script>

</head>

<body>
<p id="p1">Click this text box to see the fade effect</p>

<footer>
 <p>By Jefrey Bulla</p>
</footer>
</div>
</body>
</html> 

หากคุณต้องการลองใช้เทคนิคการจางสีเหลืองทางเลือกที่ไม่ขึ้นอยู่กับ jQuery UI คุณสามารถวางตำแหน่ง div สีเหลือง (หรือสีอื่น) ไว้ด้านหลังเนื้อหาของคุณและใช้ jQuery .fadeOut ()

http://jsfiddle.net/yFJzn/2/

<div class="yft">
    <div class="content">This is some content</div>
    <div class="yft_fade">&nbsp;</div>
</div>

<style>
  .yft_fade {
      background-color:yellow;
      display:none;
  }
  .content {
      position:absolute;
      top:0px;
  }
</style>

<script>
  $(document).ready(function() {
      $(".yft").click(function() {
          $(this).find(".yft_fade").show().fadeOut();
      });
  });​
</script>

ฉันใช้ ...

<style>
tr.highlight {
background: #fffec6;
}
</style>


<script>
//on page load, add class
$(window).load(function() {
$("tr.table-item-id").addClass("highlight", 1200);
}); 

//fade out class
setTimeout(function(){
$("tr.table-item-id").removeClass("highlight", 1200);   
}, 5200);

</script>

ง่าย / script ดิบสำหรับ "fadeout สีเหลือง" ปลั๊กอินไม่มียกเว้น jQuery ตัวเอง เพียงแค่ตั้งค่าพื้นหลังด้วย rgb (255,255, highlightcolor) ในตัวจับเวลา:

<script>

    $(document).ready(function () {
        yellowFadeout();
    });

    function yellowFadeout() {
        if (typeof (yellowFadeout.timer) == "undefined")
            yellowFadeout.timer = setInterval(yellowFadeout, 50);
        if (typeof (yellowFadeout.highlightColor) == "undefined")
            yellowFadeout.highlightColor = 0;
        $(".highlight").css('background', 'rgb(255,255,' + yellowFadeout.highlightColor + ')');
        yellowFadeout.highlightColor += 10;
        if (yellowFadeout.highlightColor >= 255) {
            $(".highlight").css('background','');
            clearInterval(yellowFadeout.timer);
        }
    }
</script>

คุณต้องใช้ HTML เท่านั้นในการทำสิ่งนี้ ไม่ต้องใช้ CSS หรือ JS!

สมมติว่าคุณมีข้อความในเพจบางเพจที่คุณต้องการ "ไฮไลต์และแสดง" ชั่วคราวให้กับผู้ใช้เมื่อเข้าชมเพจ

และปล่อยให้เนื้อหาในหน้านั้นถูกไฮไลต์เป็นแท็ก h2 และเนื้อหาแท็ก ap ตามที่แสดงด้านล่าง:

<h2>Carbon Steel for Blacksmithing</h2>

<p>The vast majority of blacksmithing uses low and medium carbon steels. High carbon steel, sometimes called “carbon tool steel,” is very hard, and difficult to bend or weld; it gets very brittle once it’s been heat-treated.</p>
<p>You can buy steel, or you can find and recycle. I prefer the later.</p>

ให้ไว้ด้านล่าง: ลิงก์ที่จะเน้นเนื้อหาที่แสดงด้านบน เมื่อใดก็ตามที่ผู้ใช้คลิกลิงก์นี้ ... พวกเขาจะถูกเปลี่ยนเส้นทางไปยังหน้าเว็บไปยังจุดเดียวกับที่เนื้อหานั้น ๆ และยังมีการเน้นข้อความด้วย!

https://stackoverflow.com/questions/848797/yellow-fade-effect-with-jquery/63571443#:~:text=Carbon%20Steel%20for%20Blacksmithing,you%20can%20find%20and%20recycle.

หากต้องการให้ตัวอย่างจริง:ไปที่ลิงก์ที่ให้ไว้ด้านบนเพื่อดูเอฟเฟกต์ไฮไลต์ของเนื้อหาที่ฉันกล่าวถึงในลิงก์