如何解決由我的jQuery導航插件和javaScript文件引起的衝突？

我的jQuery導航工作 - 但現在它與fadeIn和fadeOut效果（圖片和問候）衝突，所以他們沒有顯示出來。如何解決由我的jQuery導航插件和javaScript文件引起的衝突？

這裏是我的網頁的鏈接：http://bit.ly/1cr93gD

這裏是我的final_project.js文件的淡入淡出&效果代碼：

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文件引起的衝突？

回答

相關問題