JQuery ile sarı solma efekti

37Signals'ın Sarı Solma efektine benzer bir şey uygulamak istiyorum .

Jquery 1.3.2 kullanıyorum

Kod

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

ve sonraki çağrı show yellow DOM öğesini kutu kimliğiyle soldurur .

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

Ama onu sadece sarı yapar. 15000 milisaniyeden sonra beyaz arka plan yok.

Neden çalışmadığına dair bir fikriniz var mı?

Çözüm

Kullanabilirsiniz:

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

Ancak şunları eklemeniz gerekir:

effect.core.js
effects.highlight.js

Bu işlev, jQuery effects.core.js'nin bir parçasıdır :

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

Steerpike'ın yorumlarda belirttiği gibi, bunu kullanmak için effects.core.js ve effects.highlight.js'nin dahil edilmesi gerekir.

Hafif olduğu ve eklenti gerektirmediği için Sterling Nichols cevabını sevdim. Ancak, bunun kayan elemanlarla çalışmadığını keşfettim (örneğin, eleman "float: right" olduğunda). Bu yüzden, öğenin sayfada nasıl konumlandırıldığına bakılmaksızın vurguyu düzgün bir şekilde görüntülemek için kodu yeniden yazdım:

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

İsteğe bağlı:
Öğenin kenarlık yarıçapını da eşleştirmek istiyorsanız aşağıdaki kodu kullanın:

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 efekt kitaplığı, uygulamanıza oldukça fazla gereksiz ek yük ekler. Aynı şeyi yalnızca jQuery ile gerçekleştirebilirsiniz. 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'nizi aşağıdaki gibi tanımlayın:

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

Ve sınıfı yftherhangi bir öğeye eklemeniz yeterli$('.some-item').addClass('yft')

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

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

Hile yapmalı. Sarıya ayarlayın, sonra beyaza çevirin

Üzerinde çalıştığım bir projede buna benzer bir problemi çözdüm. Varsayılan olarak, canlandırma işlevi renkleri hareketlendiremez. JQuery Renkli Animasyonları dahil etmeyi deneyin .

Buradaki tüm cevaplar bu eklentiyi kullanıyor ancak kimse bundan bahsetmiyor.

Aslında, sadece jQuery 1.3x'e ihtiyaç duyan ve ek eklenti olmayan bir çözümüm var.

İlk olarak, komut dosyanıza aşağıdaki işlevleri ekleyin

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

Ardından, bunu kullanarak işlevi çağırın:

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

Parametreleri tahmin etmenize izin vereceğim, oldukça açıklayıcılar. Dürüst olmak gerekirse komut dosyası benden değil, onu bir sayfaya aldım ve en son jQuery ile çalışacak şekilde değiştirdim.

Not: firefox 3 ve ie 6'da test edildi (evet, o eski şeyde de çalışıyor)

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

Satır this.style.removeAttribute('filter'), IE'deki kenar yumuşatma hatası içindir.

Şimdi, her yerden YellowFade'i arayın ve seçicinizi geçin

YellowFade('#myDivId');

Kredi : Phil Haack'ın tam olarak nasıl yapılacağını gösteren bir demosu vardı. JQuery ve ASPNet MVC üzerinde bir demo yapıyordu.

Bu videoya bir bak

Güncelleme : Videoya bir göz attınız mı? Bundan bahsetmeyi unuttum JQuery.Color eklentisi gerektirir

Sadece effects.core.js ve effects.highlight.js eklemek için 23kb eklemekten nefret ediyordum, bu yüzden aşağıdakileri yazdım. Öğeyi "flaş" etmek için fadeIn (jQuery'nin bir parçasıdır) kullanarak davranışı taklit eder:

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

sonra $ ['. item'] ile çağırın. faderEffect ();

bu benim sorun için çözümüm. mükemmel çalışıyor. jslint hata doğrulamasını geçer ve ayrıca IE8 ve IE9'da düzgün çalışır. Elbette, renk kodlarını ve geri aramaları kabul etmek için ince ayar yapabilirsiniz:

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

Bu, renk solma efekti için kullanabileceğiniz jQuery olmayan bir seçenektir. "Renkler" dizisinde, ilk renkten son renge kadar ihtiyacınız olan geçiş renklerini eklersiniz. İstediğiniz kadar renk ekleyebilirsiniz.

   <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 .effect'e bağlı olmayan alternatif bir sarı soldurma tekniğini denemek isterseniz, içeriğinizin arkasına sarı (veya başka bir renk) div yerleştirebilir ve jQuery .fadeOut () kullanabilirsiniz.

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>

Ben sadece ...

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

"Sarı kararma" için basit / ham bir komut dosyası, jquery dışında eklenti yok . Sadece bir zamanlayıcıda rgb (255,255, vurgu rengi) ile arka planı ayarlama:

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

BUNU YAPMAK İÇİN YALNIZCA HTML'ye İHTİYACINIZ VAR. CSS veya JS gerekmez!

Belirli bir sayfada, ziyaret ettikten sonra kullanıcılara geçici olarak "vurgulamak ve göstermek" istediğiniz bir metniniz olduğunu varsayalım. , sayfayı ettiklerinde .

Ve o sayfadaki vurgulanacak içeriğin aşağıda gösterildiği gibi bir h2 etiketi ve ap etiketi içeriği olmasına izin verin:

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

Aşağıda verilenler: yukarıda gösterilen içeriği GERÇEKTEN vurgulayacak bir bağlantı. Bir kullanıcı bu bağlantıyı tıkladığında ... içeriğin bulunduğu sayfaya yönlendirilir ve ayrıca metin vurgulanır!

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

Canlı bir örnek vermek gerekirse: Bağlantıda bahsettiğim içerik üzerindeki vurgu etkisini görmek için yukarıda verilen bağlantıyı takip edin.