【发布时间】：2013-08-26 22:19:00
【问题描述】：
我正在努力让 jrumble 工作。这是jsfiddle：
这是我的html：
<!doctype html>
<html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.jrumble.1.3.js"></script>
<meta charset="utf-8">
<title></title>
<link href="styles.css" rel="stylesheet" type="text/css">
</head>
<script>jQuery.noConflict();</script>
<script>
$(document).ready(function(){
$('#mainNav').jrumble();
$('#mainNav').hover(function () {
$(this).trigger('startRumble');
}, function () {
$(this).trigger('stopRumble');
});
});
</script>
<body>
<!--START TOP -->
<div id="top">
<div class="wrap">
<h1 div = "headers"></h1>
<!--START NAVIGATION -->
<ul id="mainNav">
<li><a href="#top"><img src="images/fork.png">Home</a></li>
<li><a href="#aboutPortfolio"><img src="images/spooon.png">My Works</a></li>
<li><a href="#aboutMe"><img src="images/knife.png">About Me</a></li>
<li><a href="#contactMe"><img src="images/rollingpin.png">Let's Talk!</a></li>
</ul>
</div>
<!--END NAVIGATION -->
<img id="backgroundroll" class="clear" alt="" src="">
</div>
<!--END TOP -->
<!--START Portfolio -->
<div id="aboutPortfolio" class="clear">
<div class ="wrap">
<h2>Portfolio</h2>
<div id="works">
<!--WORKBOX 1 START -->
<div class="workBox bordered">
<div class="inWrap">
<div class="imageBox">
<ul>
<li title="screenshot1" style="display: block;">
<a class="Screenshot" href="" rel=</a>
</li>
</ul>
</div>
<div class ="discriptionsBox">
<div>
<strong>Client: Development Group</strong>
A small-business, start-up consulting firm.
</div>
<div>
<p>Bootstrap Template</p>
<p>Extras: Javascript</p>
<p>CMS: PHPMYADMIN</p>
</div>
<a class="workLink" href="http://www.mhd.org.pl"></a>
</div>
</div>
</div>
<!--WORKBOX 2 START -->
<div class="workBox bordered">
<div class="inWrap">
<div class="imageBox">
<ul>
<li title="screenshot1" style="display: block;">
<a class="Screenshot" href="" rel=</a>
</li>
</ul>
</div>
<div class ="discriptionsBox">
<div>
<strong>Client:</strong>
A custom designed blog for the purpose of writing about cinema.
</div>
<div>
<p>How: Hand-coded based on custom specs by the client</p>
<p>Extras: Jquery, Javascript plug in</p>
<p>CMS: MYPHPADMIN</p>
</div>
<a class="workLink" href="http://www.mhd.org.pl"></a>
</div>
</div>
</div>
<!--WORKBOX 3 START -->
<div class="workBox bordered">
<div class="inWrap">
<div class="imageBox">
<ul>
<li title="screenshot1" style="display: block;">
<a class="Screenshot" href="" rel=</a>
</li>
</ul>
</div>
<div class ="discriptionsBox">
<div>
<strong>Client:</strong>
Discription here.
</div>
<div>
<p>.</p>
<p> </p>
<p>.</p>
</div>
<a class="workLink" href="http://www.mhd.org.pl"></a>
</div>
</div>
</div>
</div>
</div>
</div>
<!--END PORTFOLIO -->
<!--START ABOUT ME -->
<div id ="aboutMe" class="clear">
<div class="wrap">
<h2>About me</h2>
<div id="aboutDescription">
<p>.</p>
<p></p>
<p</p>
<p> <a href="http://" rel="follow">More</a></p>
<p class="bigger">.</p>
<img id="photo" alt="" src="http://www.">
<div id="aboutLinks">
<h3></h3>
<ul>
<li><a></a></li>
<li><a></a></li>
<li><a></a></li>
</ul>
</div>
</div>
</div>
</div>
<!--END ABOUT ME -->
<!--START CONTACT ME -->
<div id = "contactMe">
<div class="wrap">
<h2>Contact</h2>
<div id="contactDescription">
<p>.</p>
<div id ="contactForm">
</div>
</div>
</div>
<!--END CONTACT ME -->
<!--START FOOTER -->
<div id="footer" class="wrap">
<img alt="" src="">
<p>
Copyright © 2013 Firm Technology Solutions, LLC.
<a href="http://validator.w3.org/check?uri=referer">Valid HTML 4.01 strict</a>
&
<a href="http://jigsaw.w3.org/css-validator/check/referer">CSS</a>
</p>
</div>
<!--END FOOTER -->
<script>
$(document).ready(function(){
$('a[href^="#"]').on('click',function (e) {
e.preventDefault();
var target = this.hash,
$target = $(target);
$('html, body').stop().animate({
'scrollTop': $target.offset().top
}, 900, 'swing', function () {
window.location.hash = target;
});
});
});
</script>
</body>
</html>
</body>
</html>
此外，我在使用其他脚本时遇到问题，它只是一个平滑滚动插件。它工作正常，直到我尝试添加这个脚本。我在 doc.ready() 中添加了无冲突 + 包装括号。
可以从更精通jquery的个人那里获得一些帮助，谢谢！
p.s 我知道它不能与 ab/fixed div 一起使用，而不需要放在包装器中。它的亲戚。
【问题讨论】：
标签： jquery html animation conflict