$("li:lt(" + (idx + 1) + ")").each(function(i){

注意，这里必须要加括号，是因为如果不加，idx与前面  "li:lt("  先运算，就会变成字符串类型的，然后再与后面的1 相加，就变成了字符串与字符串相加，输出的结果

是字符串的拼接。

console.log("li:lt(" + (2 + 1) + ")")
VM72:1 li:lt(3)

console.log("li:lt(" + 2 + 1 + ")");
VM76:1 li:lt(21)

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
*{
padding:0;
margin:0;
}
ul,ol{
list-style: none;
}
a{
text-decoration: none;
color:#333;
}
.box{
width: 900px;
height: 300px;
border: 1px solid #000;
margin: 50px auto;
overflow: hidden;
position: relative;
}
.box ul li{
position: absolute;
left:0px;
width: 560px;
height: 300px;
}
.box ul li.no1{
left:180px;
}
.box ul li.no2{
left:360px;
}
.box ul li.no3{
left:540px;
}
.box ul li.no4{
left:720px;
}
.box ul li .mask{
position: absolute;
width: 560px;
height: 300px;
left:0;
top:0;
background-color: rgba(0,0,0,.6);
}
</style>
</head>
<body>
<div class="box">
<ul>
<li class="no0">
<div class="mask"></div>
<a href=""><img src="data:images/0.jpg" alt=""></a>
</li>
<li class="no1">
<div class="mask"></div>
<a href=""><img src="data:images/1.jpg" alt=""></a>
</li>
<li class="no2">
<div class="mask"></div>
<a href=""><img src="data:images/2.jpg" alt=""></a>
</li>
<li class="no3">
<div class="mask"></div>
<a href=""><img src="data:images/3.jpg" alt=""></a>
</li>
<li class="no4">
<div class="mask"></div>
<a href=""><img src="data:images/4.jpg" alt=""></a>
</li>
</ul>
</div>
<script type="text/javascript" src="js/jquery-1.12.3.min.js"></script>
<script type="text/javascript">
$("li").mouseenter(function(){
// 将触发事件的对象序号保存
var idx = $(this).index();
// 小于等于序号往左移动85
$("li:lt(" + (idx + 1) + ")").each(function(i){
$(this).animate({"left": 85 * i},400);
});

// 大于信号序号往右移动
$("li:gt(" + idx + ")").each(function(i){
// console.log(i);
$(this).animate({"left": 560 + 85 * (idx + i)},400);
});

// 鼠标进入图片去掉蒙版
$(this).children(".mask").fadeOut();
// 其他兄弟加上蒙版
$(this).siblings().children(".mask").fadeIn();
});

// 鼠标离开恢复原状
$(".box").mouseleave(function(){
$("li").stop(true);
$("li").each(function(i){
// console.log(i);
$(this).animate({"left": 180 * i},400);
});
$("li").children(".mask").fadeIn();
});

</script>
</body>
</html>

【括号问题】$("li:lt(" + (idx + 1) + ")") 手风琴效果注意事项的更多相关文章

  1. 基于css3实现手风琴效果

    终于在凌晨一点钟逼迫自己写博客.一直想记录自己的前端工程师之路,但毕竟拖延症晚期.因为第一篇随笔,所以多写一点废话吧.刚刚从学校毕业,放弃了一直学习的java,而想从事前端的工作.第一是觉得osgi这 ...

  2. 使用 jQuery & CSS3 实现优雅的手风琴效果

    手风琴效果常用于切换显示一组内容,这种方式既可以节省网页空间又可以有动画效果.今天,我们将创造一个优雅的手风琴内容效果.这个想法是有悬停时滑出一些垂直手风琴标签.我们将添加一些 CSS3 属性来提升外 ...

  3. 基于 jQuery 实现垂直滑动的手风琴效果

    今天我们要与大家分享一个漂亮而灵活的垂直 jQuery 手风琴效果.其主要思想是扩大手风琴片上的点击和显示更多的信息.其他内容片段将变得不那么透明.当使用一个导航箭头导航下一个片段,新的片会从顶部或底 ...

  4. JS+JQ手风琴效果

    最新在学习JS写一些实用的小玩意——手风琴 CSS样式: <style type="text/css"> * { margin: 0px; border: 0px; p ...

  5. jquery 图片手风琴效果

    这篇主要是手风琴效果和无缝切换相结合,在Demo里的Demo3.html.Demo4.html. 手风琴原理比较简单,当鼠标经过的时候改变图片的路径,鼠标移到另一张图片时还原路径. 虽然原理简单,但是 ...

  6. 一步步教你css3手风琴效果的实现

    什么是手风琴效果? 首先我们先来看一段动画,如下图所示: 在上面动画中,我们不难发现,一排照片正常排列,当我鼠标移上(:hover)时,照片会变大显示并且把其它照片挤小.那么在鼠标来回移动的过程中,画 ...

  7. 使用JS实现手风琴效果

    想要实现简单的手风琴切换效果,需要使用JS实现,如下是使用javascript源码实现,后续会更新使用jQuery实现. 1. 先进行简单的布局:我们可以再ul下添加几个li实现html的简单布局,再 ...

  8. jQuery效果之简单的手风琴效果

    实现效果如图所示: html结构: <div class="item_box box10"> <div class="item_box_wp" ...

  9. jQuery插件实例五：手风琴效果[动画效果可配置版]

    昨天写了个jQuery插件实例四:手风琴效果[无动画版]那个是没有动画效果的,且可配置性不高,本篇为有动画效果.对于一些数据做了动态的计算,以实现自适应. 欢迎大家入群相互交流,学习,新群初建,欢迎各 ...

随机推荐

  1. 自学Zabbix3.8.4-可视化Visualisation-Slide shows

    Zabbix3.8.4-可视化Visualisation-Slide shows幻灯片 定义好screen之后,我们想了解服务器状况之时,一般会一个个screen点过去,zabbix提供了幻灯片展示方 ...

  2. Python datatime 格式转换，插入MySQL数据库

    Python datatime 格式转换,插入MySQL数据库 zoerywzhou@163.com http://www.cnblogs.com/swje/ 作者:Zhouwan 2017-11-2 ...

  3. iOS开发解决json串中的NSNull类型

    后端返回的数据中总会出现一些NSNull类型,当我们一处理程序就会崩溃,因此想到把返回的数据中的NSNull类型全部转换成@""空字符串.下面是转化方法: 1 自定义的几个方法:放 ...

  4. iOS 类似朋友圈的图片浏览器SDPhotoBrowser

    SDPhotoBrowser.Demo 1.在文件SDBrowserImageView.m中有用SDWebImage到网络加载图片 需要的注释去掉即可 #import "ViewContro ...

  5. C++各种指针辨析

    1)int *p p与*结合,表明p是一个指针 然后前面int说明p是一个整形的指针 2)int *p[n] 因为[]比*优先级高,所以p先与[]结合,表明p是个数组,然后这个数组在与*结合,说明数组 ...

  6. Linux第六节随笔 输入输出重定向 、管道、通配符、wc / grep / tr / sort / cut / which /whereis /locate /find /

    三期第五讲 -高级文件管理1.输入输出重定向 ls -l /dev/stdin -> /proc/self/fd/0 标准输入 设备:键盘 标记:0 ls -l /dev/stdout -> ...

  7. centos 7 部署 汉化版 gitlab

    =============================================== 2017/11/12_第6次修改                       ccb_warlock 更 ...

  8. JMeter集合点

    位置:添加--> 定时器-->Synchronizing Timer     注意:集合点放在所有操作之前.   假设线程组线程数设置的是50个,那么希望50个都准备好一块上,那么集合点中 ...

  9. Q：记学习枚举过程中的一个小问题

    在学习有关java枚举的时候,我们知道了所有的枚举类型均是继承自java.lang.Enum类的,且所有的枚举常量均是该枚举类型的一个对象,且对象名即为该枚举常量的名称.例子如下:源码: public ...

  10. Fiddler 抓包https配置 提示creation of the root certificate was not successful 证书安装不成功

    在使用Fiddler抓包时,我们有时需要抓https协议的包,这种需要配置一下 开启监控https才可以 首先 找到Tools——>Options 在弹出的菜单中 选择https项  勾选捕捉h ...