You can do the check inside the hover function, and if true do nothing, see the code:
var $meuLink = $('#meuLink');
var $divMostrarOcultar = $('#divMostrarOcultar');
$meuLink
.on('mouseover', function() {
var tamanhoJanela = $(window).width();
if (tamanhoJanela > 1200)
return;
console.log('A janela tem ' + tamanhoJanela + 'px');
})
.on('mouseout', function() {
var tamanhoJanela = $(window).width();
if (tamanhoJanela > 1200)
return;
console.log('A janela tem ' + tamanhoJanela + 'px');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><ahref="javascript:void(0)" id="meuLink">Passe o mouse</a>
<div id="divMostrarOcultar">Conteudo a mostrar/ocultar</div>
In this case, if the window is larger than 1200 it will not do anything, but if it is smaller or equal it will print the window size.
Just note your code, prefer to use .on('event'
instead of using the event directly. See in for the reason.
Now how could you stay in your code:
$('ul.nav li.dropdown')
.on('mouseover', function() {
if (janelaMaiorQue(1200))
return;
$(this).find('.dropdown-menu').stop(true, true).delay(100).fadeIn(400);
})
.on('mouseout', function() {
if (janelaMaiorQue(1200))
return;
$(this).find('.dropdown-menu').stop(true, true).delay(100).fadeOut(400);
});
function janelaMaiorQue(tamanho) {
var tamanhoJanela = $(window).width();
return tamanhoJanela > tamanho;
}