2013-08-23 131 views
0

我試圖讓jrumble工作。這裏是的jsfiddle:無法讓jrumble工作 - 導致其他腳本無法正常工作(衝突)

http://jsfiddle.net/TKwum/

這裏是我的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 divs下工作而不在包裝內。它的親戚。

回答

0

當您在沒有衝突模式下使用jQuery時,應該使用「jQuery」前綴而不是「$」。試試這個:

jQuery(document).ready(function(){ 
    jQuery('#mainNav').jrumble(); 
    jQuery('#mainNav').hover(function() { 
     jQuery(this).trigger('startRumble'); 
    }, function() { 
     jQuery(this).trigger('stopRumble'); 
    }); 
}); 

編輯:添加一個工作jsFiddle

+0

謝謝,但不起作用。儘管JSfiddle ......不行。 – user2089405

+0

我修改了你的[jsFiddle](http://jsfiddle.net/TKwum/1/)以向你展示一個工作示例。你的jsFiddle沒有包含jrumble庫。我還添加了jQuery.noConflict()調用,以便它更貼近您的真實代碼。 – zigdawgydawg