个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
27
4
我正在尝试使用 jquery .animate 和 .hover 构建一个小的“膨胀”效果。 mousein 事件似乎工作得很好，但是，当鼠标移出时，边距会弹回到原始位置，动画也会回到原始状态。我需要展开该元素，然后返回而不更改任何其他元素的位置。
JS:
$(document).ready(function(){
$(".nav-item").hover(
function(){
$(this).addClass('over');
$(this).animate({
width: '114px',
height:'114px',
margin: '-7px'},
300);
},
function(){
$(this).removeClass('over');
$(this).animate({
width:'100px',
height:'100px',
margin: '0'},
300);}
);
});
html:
<body>
<div class="nav-item"></div>
<div class="nav-item"></div>
<div class="nav-item"></div>
<div class="nav-item"></div>
<div class="nav-item"></div>
<div class="nav-item"></div>
<div class="nav-item"></div>
</body>
CSS:
.nav-item {
background: #ffffff;
border: 1px #000000 solid;
border-collapse: collapse;
float: left;
height: 100px;
position: relative;
width: 100px;
}
.over {
z-index: 1;
}
我把这个放在 jsfiddle .
如有任何帮助，我们将不胜感激。
最佳答案
这就是我能做的......
jquery 代码
$(document).ready(function(){
var left=0;
$(".nav-item").each(function(){
$(this).css({left:left=left+100});
console.log(left);
})
$(".nav-item").hover(function() {
$(this).addClass('over');
$(this).animate({
width: '114px',
height: '114px',
margin: '-7px'
}, 300);
},function() {
$(this).removeClass('over');
$(this).animate({
width: '100px',
height: '100px',
margin: '0'
}, 300);
}
)
})
CSS 也有一些变化
.nav-item {
background: #ffffff;
border: 1px #000000 solid;
float: left;
height: 100px;
width: 100px;
position: absolute;
}
.over {
z-index: 1;
overflow: hidden;
}
关于jquery - 协助 jquery 内容膨胀效果，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/10145854/
27
4
0
我遇到的问题是当针对不同元素多次调用该函数时。我相信我需要本地化所有变量，以便该函数可以用于多个元素。如果重要的话我还会调用 jquery 1.3。 如果我只调用 pageSlide 一次，一切都很好
我需要一些关于处理 Jframe 的作业的帮助。作业说“对于问题 27 到 31，请考虑以下类(class): import javax.swing.*; import java.awt.*; imp
我需要建议。我正在尝试使用 Tessnet2 库来识别图像文本。 图像由一个包含五个字符(字符和数字)的字符串组成。 我从 http://www.pixel-technology.com/freewa
我正在尝试制作一个成员(member)页面。对于排名，它显示数字，因此我制作了另一个具有排名 ID(1、2、3 等)的表，并为其添加了名称。这是我的代码。 Council of Balance me
我最近参加了计算机组织类(class)，在其中学习二进制十六进制等，我自己尝试创建一个从 0 计数到输入数字的程序，但是计数是用二进制完成的。我遇到了一些麻烦，让自己困惑得难以置信，如果能得到一些澄清
这里是典型的学生，正在为作业的最后步骤寻求一些意见。非常感谢任何为我指明正确方向的帮助或提示。 我们的部分任务是实现急诊室优先队列。我卡住的部分的详细信息如下: Write a class calle
我正在尝试使用 jquery .animate 和 .hover 构建一个小的“膨胀”效果。 mousein 事件似乎工作得很好，但是，当鼠标移出时，边距会弹回到原始位置，动画也会回到原始状态。我需要
我似乎无法理解为什么索引返回未定义。目标是将数字放置在有序数组中的正确位置。我首先查找位置，但它返回未定义。 var arr = [3,7,9,12,16,20,31,43,50,55]; var v
我是 LINQ 新手，在查询方面需要一些帮助。 我需要来自 (tblResources) 的属于Anonymous 和Public 的所有Resources em> 资源组 (tblResourceG
我需要编写一个 for 循环来打印从 1000 到 4 的数字，这些数字是 6 的倍数，每行一个数字。 据我所知，我的结构是正确的。 public class multiples {
我在看似简单的 MySQL 查询中遇到了一些问题。我花了几天时间试图解决这个问题。我已经很接近了，但我无法复制所请求的输出。 以下是表格: create table Schools(ID int, S
Table1 Colum1 ID Name Size 1 File23 912831823 2 File29
我正在尝试了解 SQL 连接并尝试将它们应用到我正在构建的应用程序中。我正在执行一个查询，以根据特定游戏 ID 查找时间表上的“游戏记录”。但在这个比赛记录上；对于“h_team”和“v_team”；
我有两个表，一个有类别和子类别。每个类别和子类别都有一个 id，如果它是一个子类别，它有一个 topid != 0 来表示它是什么子类别。另一个表“markers”有一个字段“cat”，它与类别字段“
目前，我有一个 url 列表可以从中获取内容并且正在连续进行。我想将其更改为并行抓取它们。这是一个伪代码。请问是设计的声音吗？我知道 .start() 启动线程，但是，我的数据库没有更新。我需要使用
对于这个问题，我很抱歉，我还不是 django 和 meteorjs 的专家。我正在尝试使用此 django-ddp 技术，但在 https://github.com/commoncode/djang
请查看此网页 - http://dev.topyaps.com/how-awesome-are-you 这篇文章是由我开发的一个 wordpress 插件构建的。由于元素的 z 索引属性，我面临各种问
首先，感谢您的帮助，我希望我正确地遵循了您的指导方针，如果没有，我将非常乐意纠正它。 我需要一些帮助来完成我的任务。最终让它运行后，我的程序无法打开我需要的文件。该程序应该打开一个名为 prog10i
我是第一个计算机科学类的学生。我想弄清楚如何设置变量，以便它接受一个数字，该数字附加到我们老师设置的命令 ./integerProperties 。请查看我编写的代码，我可以使用一些帮助来了解如何获取
好吧，基本上我希望这些 block 像普通网页一样彼此紧挨着对齐，但我似乎无法做到这一点，因为第一个“左” block (正如它所暗示的那样位于左侧)确实向左对齐。其他“中心”和“右” block 不
我是一名优秀的程序员,十分优秀！