Мигающий элемент.(Jquery исчезает в fadeOut ?)
Вопрос
У меня есть два divs, которые я хочу заставить мигать одновременно, пока пользователь не наведет курсор мыши на один из них.
var shouldiblink = '1';
function mrBlinko(divid){
while (shouldiblink =='1') {
$("#"+divid).fadeIn(100).fadeOut(300);
}
$(document).ready(function(){
mrBlinko("mydiv1");
mrBlinko("mydiv2");
}
У меня будет событие наведения курсора, которое установит shouldiblink равным '0'.Проблема в том, что циклы запускаются, как только страница готова, и браузер выходит из строя.
Я застрял с этим решением, и прямо сейчас я не могу придумать альтернативу.
Вы можете мне помочь?
Большое вам спасибо.
Решение
Я думаю, что лучшим способом будет использовать setInterval и clearInterval.
Как только страница загружена, используйте setInterval, чтобы добиться эффекта.Когда пользователь наводит курсор мыши на элемент, затем очищает интервал, используя идентификатор интервала, полученный для setInterval.
Увидеть a рабочая демо-версия.
Другие советы
Одна из альтернатив - Pulsate
эффект от Пользовательский интерфейс jQuery.
Включите его из Google API, чтобы повысить производительность.
Если вы хотите внедрить свое собственное решение, возможно, вам будет полезно ознакомиться с исходный код пульсирующего эффекта.
Как бы сильно я ни ненавидел <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');
});
Вот альтернативное решение, использующее обратный вызов завершения jQuery.
Вы можете добавить 'selected-pulsate' к элементу в любое время и вызвать setPulsate(), и он начнет пульсировать.Чтобы очистить все текущие пульсаторы, вы можете вызвать clearSelection(), который просто удаляет класс и заставляет его быть скрытым.
В clearSelection() есть строка [clearTimeout()], которая, я не уверен, необходима.В моем чрезвычайно базовом тестировании он работает без этой строки, но я не уверен, есть ли вероятность, что таймер все еще может работать в этот момент и вызывать проблемы.
Я также не был уверен, вызовет ли повторный вызов RepeatCall() в рамках завершенного обратного вызова fadeOut() переполнение стека, поэтому я использовал setTimeout с небольшим значением 10 мс для повторного вызова функции вместо того, чтобы делать это напрямую.
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);
});
});
}
}