2

真的在这个问题上摸不着头脑，在任何地方都找不到相关的帖子。所以我在我的网站上有一个功能，当用户点击他们的头像时，两个 div 使用 jQuery 来切换可见性。最终结果应如下所示：

在此处输入图像描述

在我的本地主机上，一切正常，我可以看到动画，但是当我将所有内容带到网络上时，它似乎崩溃并停止正常工作。我明白了：

在此处输入图像描述

我试图弄乱 z-index，清除我的缓存，并使用开发工具切换可见性，但没有任何效果。

我让一个朋友去网站试了一下，动画对他来说效果很好，他得到了想要的动画。

您可以在此处查看该网站：http: //infalliblegaming.com/

顺便说一句，当我单击头像时，动画一直播放到最后，但随后似乎“弹出”到导航栏中，并且我在 chrome 上看不到。（如果我检查它上面的元素，虽然我可以看到代码）

用户名：aelo 密码：aloraelor

jQuery：

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

2 回答 2

1

您是否尝试过在同一页面上使用其他动画？当动画没有任何反应时，答案是 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%，则您的blogpostspace div 太大了。在分辨率为 1024 x 980 的屏幕上，您会发现 70% 比固定在右侧的头像容器要多得多。这就是为什么您会看到错误的边界过多地出现在右边。

解决方案是将头像元素放在右侧固定的 div 中，尺寸为 %，例如：

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

和样式 css 像这样：

#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 之间的空间，只需使用边距以确保它永远有效。

像：

<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-11T07:31:32.307 回答
0

在您的 main.css 中，尝试将您的 blogspot 类更改为 position: block，或者只是删除 position 属性。

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

观察两张截图，似乎第一张是从更大的屏幕上截取的。

看这个：屏幕

于 2013-10-11T07:20:55.070 回答