#javascript #jquery #html #css
#javascript #jquery #HTML #css
Вопрос:
Вот код, но вместо того, чтобы он полностью исчезал, есть ли какой-нибудь способ сделать его прозрачным 0,5? Помощь в этом была бы очень признательна.
$(function () {
var timer;
var fadeInBuffer = false;
$(document).mousemove(function () {
if (!fadeInBuffer) {
if (timer) {
console.log("clearTimer");
clearTimeout(timer);
timer = 0;
}
console.log("fadeIn");
$('.fade-object').fadeIn();
$('html').css({
cursor: ''
});
} else {
fadeInBuffer = false;
}
timer = setTimeout(function () {
console.log("fadeout");
$('.fade-object').fadeOut()
$('html').css({
cursor: 'none'
});
fadeInBuffer = true;
}, 2000)
});
});
Ответ №1:
Вы можете использовать fadeTo(). Надеюсь, это поможет.
$(function () {
var timer;
var fadeInBuffer = false;
$(document).mousemove(function () {
if (!fadeInBuffer) {
if (timer) {
clearTimeout(timer);
timer = 0;
}
$('.fade-object').fadeTo('slow', 1);
$('html').css({
cursor: ''
});
} else {
fadeInBuffer = false;
}
timer = setTimeout(function () {
$('.fade-object').fadeTo('slow', 0.5)
$('html').css({
cursor: 'none'
});
fadeInBuffer = true;
}, 2000)
});
});
.fade-object{
height: 300px;
background: red;
width: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="fade-object"></div>
Комментарии:
1. Курсор по-прежнему прозрачен на 100%?
2. @JoalRoberts Вы не можете контролировать непрозрачность курсора по умолчанию. Вместо этого у вас может быть свой собственный курсор, и вы можете определить его непрозрачность. Смотрите, davidwalsh.name/css-custom-cursor
3. Ваши идеи ложны.
4. @JoalRoberts Если вы смогли изменить непрозрачность собственного курсора, пожалуйста, дайте мне знать. Я хочу знать, как вы это сделали!
Ответ №2:
** ОБНОВЛЕНО **
Попробуйте использовать setInterval вместо setTimeout и измените значение от 10 до 0, чтобы исчезнуть, и от 0 до 10, чтобы появиться снова (в соответствии с именами файлов).
Сделайте это, изменив пользовательские курсоры png с помощью alfa с 0 до 100 в 10 этапов.
Вот некоторые изображения, которые я подготовила: , , , , , , , , , , << последний-0%
Помните, что ваш курсор (указатель мыши) Пользовательское изображение НЕ изменится, ЕСЛИ оно НЕ перемещается **, поэтому … вам нужно будет программно перевести курсор как минимум на 10 пикселей при повторении 10 изображений.
** ОБНОВЛЕНИЕ 2 **
Здесь вы можете почувствовать идею. //codepen.io/jjyepez/pen/xEQAXZ
PS (забудьте о переводе курсора.. это вообще не обязательно)
Комментарии:
1. Пожалуйста, используйте imgur для размещения изображений. У Stack Overflow есть специальная учетная запись для их размещения. Доступ к нему осуществляется с помощью значка изображения в инструментах редактирования (верхняя панель, видимая при написании или редактировании ответа).
2. Здесь у вас это закодировано. codepen.io/jjyepez/pen/xEQAXZ Я думаю, это своего рода то, чего вы хотите (перепрограммировано).
3. PS: Примите во внимание, что пользовательские курсоры, похоже, подвергаются повторной выборке перед рендерингом, поэтому в некоторых браузерах они могут выглядеть неровными или даже альфа-пиксели могут быть цветными.