يومض عنصر. (jquery fadein fadeout؟)

Question

لدي اثنين divs التي أريد أن أخرج ومضخة في نفس الوقت حتى يحوم المستخدم بالماوس على أحدهم.

var shouldiblink = '1';

function mrBlinko(divid){
 while (shouldiblink =='1') {
 $("#"+divid).fadeIn(100).fadeOut(300);
}

$(document).ready(function(){
 mrBlinko("mydiv1");
 mrBlinko("mydiv2");
}

سآخذ حدث تحريك يحدد riveriblink إلى "0". المشكلة هي أن الحلقات تبدأ بمجرد أن تكون الصفحة جاهزة وتعطل المتصفح.

أنا عالق مع هذا الحل ولا أستطيع التفكير في بديل الآن.

هل يمكنك مساعدتي؟

شكراً جزيلاً.

Answer 1

أعتقد أن الطريقة الأفضل ستكون هي استخدام setinterval و clalinterval.

بمجرد تحميل الصفحة استخدم SetInterval للحصول على تأثير الذهاب. عندما يحوم المستخدم بالماوس فوق العنصر، فقم بمسح الفاصل الزمني باستخدام معرف الفاصل الزمني المحتوي على SetInterval.

أ عرض العمل.

Answer 2

أحد البدائل - Pulsate تأثير من jquery ui..

قم بتضمينه من Google API من أجل تحسين الأداء.

---

إذا كنت ترغب في لف الحل الخاص بك، فقد تجد فحص مفيد مصدر الرمز من تأثير النبض.

Answer 3

بقدر ما كرهت <blink> علامة، جرب هذا:

$.fn.blink = function(opts) {
   // allows $elem.blink('stop');
   if (opts == 'stop') {
     // sets 'blinkStop' on element to true, stops animations, 
     // and shows the element.  Return this for chaining.
     return this.data('blinkStop', true).stop(true, true).show();
   }

   // we aren't stopping, so lets set the blinkStop to false,
   this.data('blinkStop', false);

   // load up some default options, and allow overriding them:
   opts = $.extend({}, {
     fadeIn: 100,
     fadeOut: 300
   }, opts || {} );

   function doFadeOut($elem) {
     $elem = $elem || $(this); // so it can be called as a callback too
     if ($elem.data('blinkStop')) return;
     $elem.fadeOut(opts.fadeOut, doFadeIn);
   }
   function doFadeIn($elem) {
     $elem = $elem || $(this);
     if ($elem.data('blinkStop')) return;
     $elem.fadeIn(opts.fadeIn, doFadeOut);
   }
   doFadeOut(this);
   return this;
 };

 // example usage - blink all links until you mouseover:
 // takes advantage of the jQuery.one() function so that it only calls the 
 // stop blink once
 $('a').blink({fadeIn: 500, fadeOut: 1500}).one('mouseover', function() { 
   $(this).blink('stop') 
 });

 // 30 seconds after we started blinking, stop blinking every element we started:
 setTimeout(function() { 
   $('a').blink('stop');
 }, 30000);

 // example that should do what you wanted:
 $("#mydiv1,#mydiv2").blink().one('mouseover', function() {
   $(this).blink('stop');
 });

Answer 4

فيما يلي حلا بديلا باستخدام رد إعادة استكمال JQuery.

يمكنك إضافة "نبضات مختارة" لعنصر في أي وقت واستدعاء setpussate ()، وسوف تبدأ النبض. لمسح جميع النبضات الحالية التي يمكنك الاتصال بالإنقاذ () والتي تزيل الفصل وتؤدي فقط إلى أن تكون مخفية.

هناك خط في ClearSelection () [ClearTimeout ()]، الذي لست متأكدا هو ضروري. في اختباري الأساسي للغاية، فإنه يعمل بدون هذا الخط، لكنني لست متأكدا مما إذا كان هناك احتمال قد لا يزال يتعين على الموقت قيد التشغيل عند هذه النقطة وتسبب مشكلات.

لم أكن أيضا متأكدا مما إذا كان الاتصال التكرار () داخل خالد () رد الاتصال الكامل سيتسبب في تجاوز سعة مكدس، لذلك استخدمت pettimeout بقيمة 10msec لاستدعاء الوظيفة مرة أخرى بدلا من القيام بذلك مباشرة.

var currentPulsatorId = -1;

function clearSelection() {
    if (currentPulsatorId != -1) {
        clearTimeout(currentPulsatorId); /* needed? */
        currentPulsatorId = -1;
    }

    var curElems = $('.selected-pulsate');
    $(curElems).removeClass('selected-pulsate');
    $(curElems).hide();
}

function setSelection(elems) {
    $(elems).addClass('selected-pulsate');
    setPulsate();
}

function setPulsate() {
    // trigger
    RepeatCall();

    function RepeatCall()
    {
        $('.selected-pulsate').fadeIn(400, function() {
            $('.selected-pulsate').fadeOut(400, function() {
                // set timeout quickly again
                // call externally to avoid stack overflow
                currentPulsatorId = setTimeout(RepeatCall, 10);
            });
        });
    }
}