代码在JSFiddle中有效，但在浏览器中无效 [英] code works in JSFiddle but not browser

问题描述

我正在尝试将包含飞机图像的固定div向右移动，并在页面从顶部向下滚动时淡入0.

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.

站点: http://wp.ccrcc.org

我在JSFiddle中工作正常( http://jsfiddle.net/G4t4f/77/)但在我的Wordpress网站的页脚中.我显然在这里错过了一些东西.无论如何，这可能不是最好的方法，因为该网站正在使用bootstrap.min.js在bootstrap 3.0.3上运行?

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>

推荐答案

在您的代码运行时，似乎某些东西正在破坏$.您可以在短期内通过使用jQuery而不是$来解决此问题，例如:

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();
    });
 });

这篇关于代码在JSFiddle中有效，但在浏览器中无效的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！