2012-03-19 2 views
0

Я просмотрел некоторые похожие сообщения о задержке взаимодействия после загрузки страницы, но я не могу найти ничего о классическом отключении: hover.отключить способность мыши на загрузке страницы в течение 3 секунд

Проблема в том, что JS будет загружаться, скорее всего, медленнее, чем CSS, а взлома CSS не будет работать для этой проблемы.

Ситуация

У меня есть главная страница анимация. При загрузке страницы у меня есть стек изображений, идущих слева, и div абсолютных якорных тегов, поступающих справа (~ 2 случая на линию), которые скользят и встречаются посередине. После загрузки страницы я устанавливаю таймер, чтобы пройти через стек изображений, и соответствующий ярлык привязки выделяется.

Проблема заключается в том, что этот таймер прерывается, когда пользователь наводится на любой из тегов якорей, и когда это происходит, соответствующее изображение исчезает. И это взаимодействие может быть правильным при загрузке страницы.

Есть ли какой-либо возможный способ отключения привязки тегов a: hover на странице load/delay?

То, что я пытался

Я не могу просто удалить: с классом парения и заменить его на другой один из фонового цвета: прозрачный, потому что мой JS-прежнему поднимает функцию onHover (я мог целевым onHover только что измененный класс может быть ..)

Я могу предназначаться каждый из якорных тегов на странице загрузке с предупреждением о MouseEnter при случайном наведении курсора:

//on page load, disable mouse-over ability on anchor tags 
var disableOnLoad = function (ev) { 
    var target = $(ev.target); 
    var casesId = target.attr('id'); 

    //if mouse is over one of the cases 
    if (target.is(".cases")) { 
     //disable CSS a:hover 
     $(this).removeClass('homeText a:hover'); 
    } 
} 

Других тыс я мог бы попытаться позвонить setTimeOut (function() {onHover()), так что есть задержка, но это будет влиять и на загрузку страницы.

Любые предложения?

+1

Почему не просто функциональность парить по умолчанию отключено, то включить его после загрузки страницы? – jli

+0

права или после того, как ваши изображения будут загружены, как вы заявили, вы отслеживали, что прогресс в любом случае. –

+0

он отключен, пока он не призвали document.ready ниже начального слайда изображений. Проблема с этой идеей в том, что все еще есть класс CSS t шляпа не может быть отключена, и поэтому, хотя эта идея не остановит мою анимацию начального цикла, она все равно будет выглядеть уродливой. –

ответ

6

CSS:

#blocker{ 
     position:fixed; 
     width:100%; 
     height:100%; 
     left:0; 
     top:0; 
     right:0; 
     bottom:0; 
     z-index:9999; 
} 

JS:

setTimeout(function(){ 
     $('#blocker').remove(); 
}, 3000); 

HTML:

<body> 
     <div id="blocker" ></div> 
     <!-- your stuff --> 

убедитесь, что блокатор ДИВ близко к метке тела, чтобы гарантировать, никаких проблем захвата/Bubbling.

+0

-.- Это такая простая идея, я рад, что вы поделились ею со мной. Есть ли какие-либо обратные ссылки на использование блокатора при загрузке страницы? –

+0

нет, он просто работает. Я делаю это все время. – Fresheyeball

+0

Это то, что я бы предложил. Пойдите с этим. – Turnip

0

Что делать, если ваша страница начиналась с ваших ссылок как NOT, завернутых анкерами, и вы используете setTimeout onLoad для добавления тегов через 3 секунды?

+0

Это вызвано document.ready, что является тем же самым контекстом, который я считаю. Знаете ли вы, можно ли установить тайм-аут на отдельной загрузке страницы, которая вызывает только метод наведения? –

+0

Я не уверен, что я последую за тобой. – huzzah

0

Не проверял это, но предотвратить по умолчанию может работать для вас»

$("a").mouseover(function(event) { 
    event.preventDefault(); 
    // Run any other needed code here 
}); 

(function(){ 
    $("a").unbind('mouseover'); 
}).delay(2000); // delay 2 seconds 

Лучше запустить UNBIND код после того, как вы знаете, все изображения будут загружены

Вы также можете изменить селектор из всех теги к.Класс

0

поздновато к обсуждению, но в случае, если это помогает кто-то еще, я решил свою проблему, добавив pointer-events: none к body элемента в CSS (с использованием класса под названием pointer-none, а затем удалить его с JavaScript после задержки.

var timeout; 
window.onload = function(){ 
    timeout = setTimeout(function(){ 
    document.querySelector('body').classList.remove('pointer-none'); 
    }, 1500); 
} 
Смежные вопросы