jQuery功能在本地主机上工作，但不在网络上

真的在我的头上搔痒，无法在任何地方找到相关的帖子。所以我在我的网站上有一个功能，当用户点击他们的头像两个div使用jQuery来查看可见性。最终的结果应该是这样的：jQuery功能在本地主机上工作，但不在网络上

enter image description here

在我的本地一切工作正常，我可以看到动画，但是当我把一切都到网上，似乎打破而停止工作的权利。我得到这个：

enter image description here

我试图乱用的z-index，清除我的缓存，并使用开发工具切换的知名度，但毫无效果。

我有一个朋友去了网站，并尝试出来，动画对他工作正常，他得到所需的动画。

您可以查看这里的网站：http://infalliblegaming.com/

而且顺便说一句，当我点击动画云一路到底的形象，但随后似乎“弹出”插入导航栏和不可见的我的铬。（如果我在它检查元素，虽然我可以看到代码）

用户名：器AE10和密码：aeloraelor

的jQuery：

$("#avatar").click(function(){ 
    $("#avatarstats").stop().animate({ 
      width:'toggle', 
      visibility:'toggle' 
    }); 
    $("#avatardropdown").stop().animate({ 
      width:'toggle', 
      visibility:'toggle' 
    }); 
});

来源

2013-10-11 C T

哪里点击按钮？ – Kaarel

单击默认头像（登录后即为蓝色脸部）。 –

jQuery是客户端。因此，它是否在您的本地主机或公共领域并不重要。必须有别的东西。任何控制台错误？ –

在你的main.css，试图改变自己的blogspot类定位：块，或者只是删除位置属性。

的main.css，线159

.blogpost { 
    position: relative; (remove) 
    background:white; 
    border:1px solid #333; 
    margin-top:5px; 
    margin-bottom:5px; 
    box-shadow:1px 1px 5px #333; 
    max-height:500px; 
    overflow:hidden; 
}

观察两个截图，它似乎是第一个被从更大的屏幕截取。

看看这个：Screen

来源

2013-10-11 07:20:55 Pedro

删除position元素可以看到avatardropdown，但它会混淆其他动画，但我给了你答案。 –

如果您的#avatarstats和#avatardropdown已修复，您可以尝试将两个div都移动到文档的末尾并调整css。但我认为你的问题与客户端/服务器无关，但与屏幕大小有关。试试这个：例如，将blogpost宽度更改为700px。 – Pedro

你有与他人动画试图在同一页上？当动画没有任何反应时，答案是jquery未正确加载。要确保你没有链接本地文件服务器上，但链接脚本

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js" type="text/javascript"></script>

和动画尝试甚至包括这个

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>

希望它能帮助！

编辑：1

好吧，我找到了错误的方法。您的博客空间如果您将宽度设置为70％，则div太大。在1024 x 980等分辨率的屏幕上，您发现70％远远超过了右侧固定的头像容器。这就是为什么你看到错误的边界太正确了。

该解决方案将化身元素％的固定与维右侧像格内：

<div id="container-avatar"> 
    <img id="avatar" src=.../> 
    <div id="avatarstats">...</div> 
    <div id="avatardropdown">...</div> 
</div>

和风格的CSS LIK这样的：

#container-avatar{ 
    position:fixed; 
    width:20%;/* or whatever you want */ 
    right:20%;/* or whatever you want */ 
    top:50px; /* or whatever you want */ 

} 

#avatarstats{ 
    position:relative; 
width:70%; 
float:left; 
} 

#avatardropdown{ 
    position:relative; 
    width:30%; 
    float:left; 
}

这是我认为的方式将化身容器响应浏览器宽度。

一个建议，不要使用

标签来定义div之间的空格，只是使用margin来确保它可以工作。

像：

<div class="margin-div"> bla bla bla .....</div> 
<div class="margin-div"> bla bla bla .....</div> 
<div class="margin-div"> bla bla bla .....</div> 


css: 

.margin-div{ 
margin-bottom:30px; 
}

再见！

来源

2013-10-11 07:31:32 SBO

其他动画正在工作，我链接到谷歌API。 –

在我的电脑上，它可以正常使用Chrome和Firefox。 – SBO

jQuery功能在本地主机上工作，但不在网络上

回答

相关问题