Установите задержку времени между двумя кадрами на MouseOver
-
30-09-2019 - |
Вопрос
Я должен отобразить два изображения для одиночного mouseover
. Анкет Итак, когда я mouseover
На изображении, сначала изображение отображается, затем со временной задержкой 5000, изображение необходимо для отображения для того же самоуправления. Сейчас на mouseout
отобразить исходное изображение.
Я не так знаком с JavaScript и JQuery.
Кто -нибудь может дать мне некоторое представление о том, как это сделать.
Что я сделал, так это
$('.image1').mouseover(function() {
setInterval($(this).removeClass(.image1).addClass('image-over1'),5000);
$(this).removeClass(.image1).addClass('image-over2');
});
$('.image1').mouseout(function() {
$(this).removeClass('image-over1');
$(this).removeClass('image-over2').addClass(item);
});
$('.image1').click(function(){
document.location='index.php?page='index.php';
})
Решение
А .hover()
Функция позволяет вам одновременно указывать как MouseOver/Mouseout, и вам необходимо выполнить функцию для setInterval
:
$('.image1').hover(function(evt) {
// mouse over function.
// DOM Element that got the mouseover.
var target = evt.target;
if (target.timer) {
clearTimeout(target.timer);
target.timer = null;
}
target.timer = setInterval(function() {
// $(this) will not work here, since 'this' has changed.
// depending on your css you shouldn't need to remove the '.image1'
// class, just make sure .image-over1 and .image-over2 are
// stronger selectors, or occur after .image1
$('.image1').addClass('image-over2');
// at this point your element will be (just guessing <img>, could be
// anything really:
// <img class="image1 image-over1 image-over2" .../>
// it's absolutely fine for the image to have all those classes as
// long as your css is correct.
}, 5000);
$('.image1').addClass('image-over1');
}, function(evt) {
// mouse out function.
// DOM Element that got the mouseout.
var target = evt.target;
if (target.timer) {
clearTimeout(target.timer);
target.timer = null;
}
$('.image1').removeClass('image-over1');
$('.image1').removeClass('image-over2');
});
$('.image1').click(function(){ document.location='index.php?page='index.php'; })
Другие советы
Прежде всего, я думаю, что в вашем подходе есть проблема; Если вы удалите класс «Image1» из элемента на Mouseover, то этот элемент не будет сопоставлен селектором $ (». Image1») для Mouseout. Есть ли причина, по которой вам нужно его удалить? Если вы это сделаете (т.е. если есть что -то определенное в классе в CSS, что вам нужно отключить), есть ли какой -то другой селектор, на котором вы могли бы соответствовать?
Что касается задержки по времени, если вы используете версию jQuery, превышающую 1,4, вы можете использовать функцию .delay ():
$('.image1').mouseover(function() {
$(this).addClass('image-over1').delay(5000).addClass('image-over2');
});
Возможно, вы, чтобы создать анимированный GIF этих изображений ??? Затем используйте код, похожий на здесь: http://www.netmechanic.com/news/vol3/design_no10.htm
Даже если изображения генерируются на Fly, можно программировать анимационную GIF в PHP - см. http://php.net/manual/en/function.imagegif.php