code works in JSFiddle but not browser

问题

I'm trying to move a fixed div containing an image of an airplane to the right and fade to 0 as the page is scrolled down from the top.

site: http://wp.ccrcc.org

I works fine in JSFiddle (http://jsfiddle.net/G4t4f/77/) but on in the footer of my Wordpress site. I'm obviously missing something here. This may not be the best way to do it anyway since the site is running on bootstrap 3.0.3 with bootstrap.min.js?

<style>
    #header-plane {
    z-index: 5;
    width: 400px;
    position: fixed;
    right: 550px;
    top: 200px;}
</style>

<div id="header-plane">
<img src="http://wp.ccrcc.org/wp-content/themes/ccrcc/images/plane-1.png" 
alt="R/C plane" width="400" height="162">
</div>

<div id="footer">
<script type="text/javascript">
  $( document ).ready(function() {
    function flyOut() {
        var top = $(document).scrollTop();
           if (top < 30) {
                 $('#header-plane').animate({
                    'right': '0',
                    'opacity': 0
                 }, 'slow', function() {
                 });        
              }
    }

    $(window).scroll(function () {
      flyOut();
    });
 });
</script>
</div>

回答1:

It looks like something is breaking $ by the time your code runs. You could work around that in the short term by using jQuery instead of $, like this:

  jQuery( document ).ready(function() {
    function flyOut() {
        var top = jQuery(document).scrollTop();
           if (top < 30) {
                 jQuery('#header-plane').animate({
                    'right': '0',
                    'opacity': 0
                 }, 'slow', function() {
                 });        
              }
    }

    jQuery(window).scroll(function () {
      flyOut();
    });
 });

回答2:

The reason for this is how wordpress initialize jQuery. Have a look here: jQuery noConflict Wrappers. In "no-confict" mode, the $ shortcut is not available and the longer jQuery is used. The following construct is a timesaver:

jQuery(document).ready(function($) {
    // Inside of this function, $() will work as an alias for jQuery()
    // and other libraries also using $ will not be accessible under this shortcut
});

来源：https://stackoverflow.com/questions/21449123/code-works-in-jsfiddle-but-not-browser

标签

jquery

jquery-animate

jsfiddle