发表新帖
发表新帖

Yellow fade effect with JQuery

前端 未结
关注
15 1718
萌比男神i
萌比男神i 2020-11-29 16:23

I would like to implement something similar to 37Signals\'s Yellow Fade effect.

I am using Jquery 1.3.2

The code 

(function($) {
   $.fn.yell
相关标签:
15条回答
  • 攒了一身酷
    2020-11-29 16:56

    This function is part of jQuery effects.core.js :

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

    As Steerpike pointed out in the comments, effects.core.js and effects.highlight.js need to be included in order to use this.

    0 讨论(0)
  • 盖世英雄少女心
    2020-11-29 16:57

    YOU NEED ONLY HTML TO DO THIS. No CSS or JS required!

    Suppose you have a text on a certain page that you want to temporarily "highlight and show" to users upon visiting the page.

    And let the content on that page to be highlighted be a h2 tag and a p tag content as shown below:

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

    Given below: a link that will ACTUALLY highlight the content that is shown above. Whenever a user clicks this link... they get redirected to the page to the same spot where where the content is, and also the text is highlighted!

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

    To give a live example: Follow the link given above to see the highlight effect upon the content that I mentioned in the link.

    0 讨论(0)
  • 长情又很酷
    2020-11-29 17:00

    This is a non-jQuery option you can use for the color fade effect. In the array "colors", you add the transition colors you need from the initial color until the last color. You can add as much colors as you want. 

       <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>
    0 讨论(0)
  • 太阳男子
    2020-11-29 17:01

    I just solved a problem similar to this on a project I was working on. By default, the animate function cannot animate colors. Try including jQuery Color Animations.

    All the answers here use this plugin but no one mentions it.

    0 讨论(0)
  • 别跟我提以往
    2020-11-29 17:08

    I hated adding 23kb just to add effects.core.js and effects.highlight.js so I wrote the following. It emulates the behavior by using fadeIn (which is part of jQuery itself) to 'flash' the element:

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

    then call it with $('.item').faderEffect();

    0 讨论(0)
  • 情书的邮戳
    2020-11-29 17:09

    The jQuery effects library adds quite a bit of unneeded overhead to your app. You can accomplish the same thing with jQuery only. 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();
    0 讨论(0)
 看不清?
提交回复
热议问题