Efek fade kuning dengan JQuery

Saya ingin mengimplementasikan sesuatu yang mirip dengan efek Yellow Fade 37Signals.

Saya menggunakan Jquery 1.3.2

Kode

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

dan panggilan berikutnya menunjukkan warna kuning memudar elemen DOM dengan id kotak .

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

Tapi itu hanya membuatnya menjadi kuning. Tidak ada latar belakang putih setelah 15.000 milidetik.

Tahu mengapa tidak berhasil?

Larutan

Kamu bisa memakai:

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

Tetapi Anda perlu memasukkan:

effects.core.js
effects.highlight.js

Fungsi ini adalah bagian dari jQuery effects.core.js :

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

Seperti yang ditunjukkan Steerpike di komentar, effects.core.js dan effects.highlight.js perlu disertakan untuk menggunakan ini.

Saya menyukai jawaban Sterling Nichols, karena ringan dan tidak memerlukan plugin. Namun, saya menemukan itu tidak bekerja dengan elemen mengambang (yaitu seperti ketika elemen adalah "float: right"). Jadi saya menulis ulang kode untuk menampilkan sorotan dengan benar tidak peduli bagaimana elemen diposisikan di halaman:

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

Opsional:
Gunakan kode berikut jika Anda juga ingin mencocokkan radius-batas elemen:

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

Pustaka efek jQuery menambahkan sedikit overhead yang tidak diperlukan ke aplikasi Anda. Anda dapat mencapai hal yang sama hanya dengan 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();

Tentukan CSS Anda sebagai berikut:

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

Dan cukup tambahkan kelas yftke item mana saja$('.some-item').addClass('yft')

Demo: http://jsfiddle.net/Q8KVC/528/

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

Harus melakukan trik. Atur menjadi kuning, lalu pudar menjadi putih

Saya baru saja memecahkan masalah yang mirip dengan ini pada proyek yang saya kerjakan. Secara default, fungsi animasi tidak dapat menganimasikan warna. Coba sertakan Animasi Warna jQuery .

Semua jawaban di sini menggunakan plugin ini tetapi tidak ada yang menyebutkannya.

Sebenarnya, saya punya solusi yang hanya membutuhkan jQuery 1.3x, dan tidak ada plugin aditionnal.

Pertama, tambahkan fungsi berikut ke skrip Anda

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

Selanjutnya, panggil fungsi menggunakan ini:

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

Saya akan membiarkan Anda menebak parameternya, mereka cukup jelas. Sejujurnya script tersebut bukan dari saya, saya mengambilnya di halaman lalu mengubahnya sehingga berfungsi dengan jQuery terbaru.

NB: diuji pada firefox 3 dan ie 6 (ya, ini berfungsi pada yang lama juga)

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

Baris this.style.removeAttribute('filter')ini untuk bug anti-aliasing di IE.

Sekarang, panggil YellowFade dari mana saja, dan teruskan pemilih Anda

YellowFade('#myDivId');

Kredit : Phil Haack memiliki demo yang menunjukkan dengan tepat bagaimana melakukan ini. Dia melakukan demo di JQuery dan ASPNet MVC.

Lihatlah video ini

Pembaruan : Apakah Anda melihat videonya? Lupa menyebutkan ini membutuhkan plugin JQuery.Color

Saya benci menambahkan 23kb hanya untuk menambahkan efek.core.js dan efek.highlight.js jadi saya menulis yang berikut ini. Ini meniru perilaku dengan menggunakan fadeIn (yang merupakan bagian dari jQuery itu sendiri) untuk 'mem-flash' elemen:

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

lalu panggil dengan $ ('. item'). faderEffect ();

ini adalah solusi saya untuk masalah tersebut. itu bekerja dengan sangat baik. itu melewati validasi kesalahan jslint dan juga berfungsi dengan baik di IE8 dan IE9. Tentu saja Anda dapat menyesuaikannya untuk menerima kode warna dan panggilan balik:

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

Ini adalah opsi non-jQuery yang dapat Anda gunakan untuk efek warna memudar. Dalam larik "warna", Anda menambahkan warna transisi yang Anda butuhkan dari warna awal hingga warna terakhir. Anda dapat menambahkan warna sebanyak yang Anda inginkan.

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

Jika Anda ingin mencoba teknik fade kuning alternatif yang tidak bergantung pada jQuery UI .effect, Anda dapat menempatkan div kuning (atau warna lain) di belakang konten Anda dan menggunakan 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>

Saya hanya menggunakan ...

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

Skrip sederhana / mentah untuk "fadeout kuning", tidak ada plugin kecuali jquery itu sendiri . Hanya mengatur latar belakang dengan rgb (255.255, warna sorot) di timer:

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