Как разрешить конфликт, вызванный моим плагином навигации jQuery и файлом javaScript?

Навигационная система jQuery работает, но теперь она противоречит эффекту fadeIn и fadeOut (изображение и приветствие), поэтому они не отображаются.Как разрешить конфликт, вызванный моим плагином навигации jQuery и файлом javaScript?

Вот ссылка на мою страницу: http://bit.ly/1cr93gD

Вот код, который находится на моем final_project.js файл для эффектов FADEOUT FadeIn &:

jQuery$(document).ready(function() { 
    $('#headshot').css('visibility','visible').hide().fadeIn(5000); 
    $('#greeting').css('visibility','visible').hide().toggle(9000); 

    var defaultH1 = parseInt($('h1').css('font-size')); 
    var defaultP = parseInt($('p').css('font-size')); 
    var count = 0; 
    var elements = ['p', 'h1']; 

    $('.minus').click(function(){ 
if (count >= -1) { 
    $(elements).each(function(key, val) { 
     $(val).css('font-size', parseInt($(val).css('font-size'))-2); 
    }); 
    count--; 
}; 
    }); 

    $('.plus').click(function(){ 
if (count <= 1) { 
    $(elements).each(function(key, val) { 
     $(val).css('font-size', parseInt($(val).css('font-size'))+2); 
    }); 
    count++; 
}; 
    }); 

    $('.reset').click(function(){ 
$('h1').css('font-size', defaultH1); 
$('p').css('font-size', defaultP); 
count = 0; 
} 
    });

источник

2013-12-13 user2155045

Ваш код был проверен его имел некоторую синтаксическую ошибку я исправил ее, и она отлично работает, сильфон рабочий код

<!DOCTYPE html> 
<html> 
<head> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"> 
</script> 
<script> 
$(document).ready(function() { 
    $('#headshot').css('visibility','visible').hide().fadeIn(5000); 
    $('#greeting').css('visibility','visible').hide().toggle(9000); 

    var defaultH1 = parseInt($('h1').css('font-size')); 
    var defaultP = parseInt($('p').css('font-size')); 
    var count = 0; 
    var elements = ['p', 'h1']; 

    $('.minus').click(function(){ 
if (count >= -1) { 
    $(elements).each(function(key, val) { 
     $(val).css('font-size', parseInt($(val).css('font-size'))-2); 
    }); 
    count--; 
}; 
    }); 

    $('.plus').click(function(){ 
if (count <= 1) { 
    $(elements).each(function(key, val) { 
     $(val).css('font-size', parseInt($(val).css('font-size'))+2); 
    }); 
    count++; 
}; 
    }); 

    $('.reset').click(function(){ 
$('h1').css('font-size', defaultH1); 
$('p').css('font-size', defaultP); 
count = 0; 
}) 
    }); 
</script> 
</head> 
<body> 
<h1>Testing the code</h1> 
<button class="minus"> - </button> 
<button class="plus"> + </button> 
<button class="reset"> reset </button> 
<p>This is a paragraph.</p> 
<h1 id="greeting">Welcome</H1> 
<img src="http://www.kveller.com/mayim-bialik/wp-content/uploads/2011/12/mayim-bialik-headshot-cropped.jpg" id="headshot"></img> 
</body> 
</html>

, если вы хотите переключиться между объектами, тогда посмотрите на пример ниже, чтобы сделать это.

<!DOCTYPE html> 
<html> 
<head> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"> 
</script> 
<script> 

$(document).ready(function() { 
    $('#headshot').fadeOut(000); 
    $('#greeting').fadeOut(5000); 
    $('#headshot').fadeIn(5000); 
    setInterval(function(){ 
      $('#headshot').fadeOut(5000); 
      $('#greeting').fadeIn(5000); 
    },10000); 
setTimeout(function(){ 
     setInterval(function(){ 
       $('#headshot').fadeIn(5000); 
       $('#greeting').fadeOut(5000); 
     },10000); 
    },5000); 
}); 
</script> 
<style> 
#greeting,#headshot {position:fixed;top:0px;left:0px;} 
</style> 
</head> 
<body> 
<h1 id="greeting" >Welcome</H1> 
<img src="http://www.kveller.com/mayim-bialik/wp-content/uploads/2011/12/mayim-bialik-headshot-cropped.jpg" id="headshot" width="200px" height="200px"></img> 
</body> 
</html>

В этом случае оба объекта могут быть одного или другого типа.

источник

2014-04-01 18:41:05

Как разрешить конфликт, вызванный моим плагином навигации jQuery и файлом javaScript?

ответ

Смежные вопросы