JQuery এর সাথে হলুদ বিবর্ণ প্রভাব

Question

আমি 37 সিগন্যালের ইয়েলো ফেইড এফেক্টটির অনুরূপ কিছু বাস্তবায়ন করতে চাই ।

আমি Jquery 1.3.2 ব্যবহার করছি

কোড

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

এবং পরবর্তী কল হলুদ বিবর্ণ সঙ্গে করে DOM elment দেন বক্স আইডি।

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

তবে এটি কেবল এটি হলুদ করে তোলে। 15000 মিলিসেকেন্ডের পরে কোনও সাদা পটভূমি নেই।

কোন ধারণা কেন এটি কাজ করছে না?

সমাধান

তুমি ব্যবহার করতে পার:

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

তবে আপনাকে অন্তর্ভুক্ত করতে হবে:

effects.core.js
effects.highlight.js

Comments

হাইলাইট উত্সটি এখানে: github.com/jquery/jquery-ui/blob/master/ui/…

— স্টাইলফেল

Answer 1

এই ফাংশনটি jQuery ইফেক্টস কোডের.জেসের অংশ :

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

হিসাবে Steerpike মন্তব্য নির্দিষ্ট, effects.core.js এবং effects.highlight.js অর্ডার ব্যবহার করতে অন্তর্ভুক্ত করা প্রয়োজন।

Comments

আমি jquery সাইট ডকসগুলিতে ডকস দেখেছি qu jquery.com/UI/Effects/Hightlight# ওভারভিউ আমি আমার কোডে চেষ্টা করেছি কিন্তু কিছুই করি না। আমার কি কোনও অতিরিক্ত ডাউনলোড করতে হবে? এটি নির্ভরতা বলে: প্রভাব কোর। এটি এটি অন্য একটি প্লাগইন।

— সার্জিও দেল আমো

উত্তরটি সঠিক করুন, তবে আমি কেবল এটি jQuery इफेक्ट.core.js এর জন্য একটি বিল্ট ফাংশন উল্লেখ করব, মূল jQuery ফাইলটিকে অ্যানিমেট () হিসাবে নয়। শুধু ভেবেছিলাম এটি স্পষ্ট করার মতো।

— স্টেরপাইক

হেই, সার্জিও যেমন স্পষ্টতই সবেমাত্র আবিষ্কার করেছেন ... হ্যাঁ সার্জিও, আপনাকে અસરો.core.js ফাইল এবং ইফেক্টস হাইটলাইট.জেএস অন্তর্ভুক্ত করতে হবে (উত্সটি এখানে পরীক্ষা করুন: ডকস.জেকুয়ারী / ইউআই / এফেক্টস / হাইলাইট )

— স্টিয়ারপাইক

এটি jQuery UI- তে উপলব্ধ: ডকস.জকোরি

— ম্যাট সিলিপোতি

পূর্ববর্তী মন্তব্যে আপডেট হিসাবে, আপনি আর আর্টিকেলস.ওর.জেস এবং ইফেক্টস হাইটলাইট.জেএস (এবং সেই পুরানো ইউআরএলগুলি আর কাজ করবে না)। এটি অন্তর্ভুক্ত করার নতুন উপায়টি

— সান কলম্বো

Answer 2

আমি স্টার্লিং নিকোলস উত্তরটি পছন্দ করতাম, যেহেতু এটি হালকা ওজনের এবং কোনও প্লাগইন লাগেনি। তবে, আমি আবিষ্কার করেছি এটি ভাসমান উপাদানগুলির সাথে কাজ করে না (যেমন উপাদানটি যখন "ভাসমান: ডান" হয়)। সুতরাং হাইলাইটটি সঠিকভাবে প্রদর্শন করার জন্য কোডটি আমি আবার লিখেছি যাতে উপাদানটি পৃষ্ঠায় কীভাবে অবস্থান করা যায়:

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

Alচ্ছিক:
আপনি যদি উপাদানটির সীমানা ব্যাসার্ধের সাথেও মিল করতে চান তবে নিম্নলিখিত কোডটি ব্যবহার করুন:

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

Comments

আমি এই সমাধান ভালোবাসি। টেবিল সারিগুলিতে দুর্দান্ত কাজ করে।

— পেরি টিউ

এখন পর্যন্ত সেরা সমাধান। যদি এটিও উপাদানটির সীমানার ব্যাসার্ধটিকে অনুলিপি করে তোলে তবে এটি আরও ভাল।

— স্টিজন ভ্যান বেল

@ স্টিজনভ্যানবেল কোডটি এখন সীমানা-ব্যাসার্ধের অনুলিপি করতে আপডেট হয়েছে। আপনার পরামর্শের জন্য ধন্যবাদ।

— ডগ এস

এটি দুর্দান্ত, আমার জন্য এখন ইউআই লিবের কোনও প্রয়োজন নেই, তবে আমার সমস্যাটি হ'ল এটি আমার সম্পূর্ণ ডিভটি প্রথম ব্যবহারের ক্ষেত্রে হাইলাইট করবে না, সম্ভবত এটির কিছু অংশ খালি রয়েছে এবং এটি বলা হওয়ার ঠিক আগে পাঠ্য সেট করা আছে?

— দুষ্টুস্কুইড

দুর্দান্ত, তবে এটি ফেদারলাইটজেসের মতো মডেলগুলিতে কাজ করবে বলে মনে হচ্ছে না।

— রায়ান

Answer 3

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

Comments

ধন্যবাদ, এটি আরও ভাল এবং আমি এমন কিছু সন্ধান করছিলাম যা দিয়ে আমি সম্পূর্ণ ইউআই কোর অন্তর্ভুক্ত করতে পারি যা সম্পূর্ণ অপ্রয়োজনীয় ছিল।

— দিজ

আপনি দোলা। অন্য কোনও প্লাগইন যুক্ত না করে আমি ঠিক কী খুঁজছিলাম। এবং আমি পছন্দ করি যে এটি কেবলমাত্র উপাদানটির পটভূমির রঙ পরিবর্তন করার বিপরীতে পুরো উপাদানটির প্রকৃত ওভারলে করে (যা পাঠ্য, বোতাম ইত্যাদি দ্বারা আবৃত হতে পারে)।

— ডগ এস

আপডেট: ভাসমান উপাদানগুলিকে হাইলাইট করার চেষ্টা করার সময় এই কোডটি প্রায়শই ব্যর্থ হয় (যেমন যখন উপাদানটি "ভাসা: ডান" হয়)। সুতরাং হাইলাইটটি সঠিকভাবে পৃষ্ঠাতে কীভাবে উপস্থাপন করা হয়েছে তা নির্ধারণ করার জন্য আমি কোডটি আবার লিখেছিলাম: stackoverflow.com/a/13106698/1145177

— ডগ এস

ডগ আপডেটের জন্য ধন্যবাদ .. আমার নিজের লাইব্রেরি আপডেট করতে হবে।

— স্টার্লিং নিকোলস

দুর্দান্ত লাইটওয়েট সমাধান - সত্যই ভাল কাজ করে। আমি দেখতে পেয়েছি যে আমার হাইলাইটগুলিতে উপাদানগুলির প্যাডিং অন্তর্ভুক্ত নেই, তাই আমি ব্যবহার করেছি .width(el.outerWidth())এবং .height(el.outerHeight())আমার ফর্মের ক্ষেত্রগুলি পুরো হাইলাইট করতে।

— মার্চ বি

Answer 4

আপনার সিএসএস নিম্নলিখিত হিসাবে সংজ্ঞায়িত করুন:

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

Answer 5

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

কৌতুক করা উচিত। এটি হলুদতে সেট করুন, তারপরে এটি সাদা হয়ে যাবে

Comments

উত্তর করার জন্য ধন্যবাদ. এটি যদিও কাজ করছে না। মনে হয় অ্যানিমেটে কিছু হয় না।

— সার্জিও দেল আমো

আপনি jQuery এর কোন সংস্করণ ব্যবহার করছেন?

1.3.2। আমি এটি আমার প্রশ্নের সাথে যুক্ত করেছি

— সার্জিও ডেল আমো

এটি ভ্যানিলা জ্যাকুরির বাইরে কোনও নির্ভরতা ছাড়াই আমার উদ্দেশ্যে ভাল কাজ করেছে।

— gojomo

এটির জন্য jQuery.Color () প্লাগইন দরকার: github.com/jquery/jquery-color

— Dia

Answer 6

আমি যে প্রকল্পে কাজ করছি তার ঠিক ঠিক এর মতো একটি সমস্যার সমাধান করেছি। ডিফল্টরূপে, অ্যানিমেট ফাংশন রঙগুলি প্রাণবন্ত করতে পারে না। JQuery রঙ অ্যানিমেশন সহ চেষ্টা করুন ।

এখানে সমস্ত উত্তর এই প্লাগইন ব্যবহার করে কিন্তু কেউই এটি উল্লেখ করে না।

Answer 7

প্রকৃতপক্ষে, আমার একটি সমাধান রয়েছে যার কেবল jQuery 1.3x প্রয়োজন, এবং কোনও অ্যাডিশনাল প্লাগইন নেই।

প্রথমে আপনার স্ক্রিপ্টে নিম্নলিখিত ফাংশনগুলি যুক্ত করুন

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 এর সাথে কাজ করে।

এনবি: ফায়ারফক্স 3 এবং অর্থাত 6 tested এ পরীক্ষিত

Answer 8

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')আইইতে একটি অ্যান্টি-আলিয়াজিং বাগের জন্য।

এখন, যে কোনও জায়গা থেকে ইয়েলোফ্যাডে কল করুন এবং আপনার নির্বাচককে পাস করুন

YellowFade('#myDivId');

ক্রেডিট : ফিল হ্যাক ঠিক কীভাবে এটি করবেন তা প্রদর্শনের একটি ডেমো ছিল। তিনি জিকুয়ারি এবং এএসপিনেট এমভিসি তে একটি ডেমো করছিলেন।

এই ভিডিওটি একবার দেখুন

আপডেট : আপনি ভিডিওটি একবার দেখেছেন? এটি উল্লেখ করতে ভুলে গেছেন JQuery.Coror প্লাগইন প্রয়োজন

Comments

পরবর্তী ত্রুটি ফিল্টার লাইন দ্বারা নিক্ষেপ করা হচ্ছে। আমি একটি টেবিল সারি উপাদান (ট্র) -এর জন্য হলুদ বিবর্ণ ব্যবহার করছি "এটি.স্টাইল.আরমোঅ্যাট্রিবিউট কোনও ক্রিয়াকলাপ নয় [এই ত্রুটিটি ভাঙ্গা করুন] এটি st স্টাইল.রেমোঅ্যাট্রিবিউট ('ফিল্টার');"

— সেরজিও দেল আমো

Answer 9

আমি প্রভাবগুলি। উপাদানটি 'ফ্ল্যাশ' করতে 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); 
        });
    });
}

তারপরে এটিকে $ ('। আইটেম') দিয়ে কল করুন f faderEffect ();

Comments

এটি হলুদ বিবর্ণের মতো নয় যা ব্যবহারকারীর প্রয়োজন।

— জন উইনস্টলি

ঠিক। আমি বিকল্প বা "অনুরূপ কিছু" পরামর্শ দিচ্ছি।

— কোরি

Answer 10

এটিই সমস্যার সমাধান আমার। এটা দুর্দান্ত কাজ করে। এটি 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});
};

Comments

jQuery হাইলাইট এর উপর এর কী লাভ আছে? docs.jquery.com/UI/Effects/Hightlight

— নাথান কোপ

ভাল আমার ক্ষেত্রে আমি Jquery ui ব্যবহার করতে পারে না। সুতরাং আমি কেবল জ্যাকুরির সাথে একটি সমাধান স্থির করে রেখেছিলাম।

— অনেক

Answer 11

এটি রঙ-বিবর্ণ প্রভাবের জন্য আপনি নন-জিক্যুয়ারি বিকল্পটি ব্যবহার করতে পারেন। অ্যারে "রঙগুলি" এ, আপনি প্রাথমিক রঙ থেকে শেষ রঙ পর্যন্ত আপনার প্রয়োজনীয় রূপান্তর রঙগুলি যুক্ত করেন। আপনি যতগুলি রং চান চান যোগ করতে পারেন।

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

Answer 12

আপনি যদি এমন কোনও বিকল্প হলুদ বিবর্ণ প্রযুক্তি ব্যবহার করতে চান যা jQuery UI প্রভাবের উপর নির্ভর করে না, আপনি আপনার সামগ্রীর পিছনে একটি হলুদ (বা অন্য কোনও রঙ) ডিভ স্থাপন করতে পারেন এবং 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>

Answer 13

আমি কেবল ...

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

Answer 14

"হলুদ ফিডআউট" এর জন্য একটি সহজ / কাঁচা স্ক্রিপ্ট, নিজেই jquery ব্যতীত কোনও প্লাগইন নেই । একটি টাইমারটিতে স্রেফ আরজিবি (255,255, হাইলাইটকলার) দিয়ে ব্যাকগ্রাউন্ড সেট করা:

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