jQuery更改图片的不透明度

jQuery（函数（$）{
//过滤器选择器
$（“.filter”）。在（“单击”，函数（）{
var$this=$（this）；
//如果单击活动选项卡，则不执行任何操作
if（！$this.hasClass（“活动”））{
$（“.filter”）.removeClass（“活动”）；
$this.addClass（“活动”）；//设置活动选项卡
//从所选选项卡获取数据rel值并设置为筛选器
var$filter=$this.data（“rel”）；
//如果选择全部查看，则返回初始设置并全部显示
如果（$filter=='all'）{//如果我们选择“查看全部”，则返回初始设置并显示全部
$（“.fancybox”）
.attr（“数据fancybox过滤器”、“图库”）
.fadeTo（“fast”，1）；//否则
}否则{
$（'.fancybox[data filter=“+$filter+'”）//选择具有当前筛选器的所有项目
.attr（“数据fancybox筛选器”，$filter）//设置数据fancybox组
.fadeTo（“快速”，1）；//使它们“稳定”
$（'.fancybox[data filter！='+$filter+''']'）//选择不在当前筛选器中的所有项目
.fadeTo（“slow”，0.5）；//将它们部分淡出
}//如果
}//如果
})；开
//幻想箱
$（“.fancybox”）.fancybox({
模态：false，//启用常规导航和关闭按钮
//添加按钮助手（需要按钮助手js和css文件）
填充：0，
助手：{
拇指：{
宽度：50，
身高：50，
},
} 
});
}); // 准备好的

Qyas工程咨询公司
Qyas工程咨询公司
切换导航








&抄袭；2017年QYAS工程咨询-保留所有权利。

您使用

fadeTo

的方法是正确的，但是在最后使用

fadeIn

时，假设项目之前已

fadeOut

编辑过。因此，我们使用

fadeTo

将我们想要的项目设置回完全不透明度

代码段的代码是从中修改的

更新：与其用过滤函数链接淡出和淡入，我想您更希望它们同时发生。因此，我修改了过滤器选择代码

jQuery（函数（$）{
$（“.fancybox”）.fancybox({
莫代尔：是的，
助手：{
按钮：{}
}
});
$（“.filter”）。在（“单击”，函数（）{
var$this=$（this）；
//如果单击活动选项卡，则不执行任何操作
if（！$this.hasClass（“活动”））{
$（“.filter”）.removeClass（“活动”）；
$this.addClass（“活动”）；//设置活动选项卡
var$filter=$this.data（“rel”）；//从所选选项卡获取数据rel值并设置为filter
如果（$filter=='all'）{//如果我们选择“查看全部”，则返回初始设置并显示全部
$（“.fancybox”）
.attr（“数据fancybox组”、“图库”）
.fadeTo（“fast”，1）；//否则
}否则{
$（'.fancybox[data filter=“+$filter+'”）//选择具有当前筛选器的所有项目
.attr（“数据fancybox组，$filter）//设置数据fancybox组
.fadeTo（“快速”，1）；//使它们“稳定”
$（'.fancybox[data filter！='+$filter+''']'）//选择不在当前筛选器中的所有项目
.fadeTo（“slow”，0.2）；//将它们部分淡出
}//如果
}//如果
})；开
}); // 就绪

.imgContainer{
宽度：100px；
高度：100px；
溢出：隐藏；
文本对齐：居中；
保证金：10px 20px 10px 0；
浮动：左；
边框：实心1px#999；
显示：块；
}
.imgContainer:悬停{
边框底部：实心1px#444；
左边框：实心1px#444；
-网络工具包盒阴影：-3px 3px 10px 1px#777；
-莫兹盒阴影：-3px 3px 10px 1px#777；
盒影：-3px 3px 10px 1px#777；
利润率：9px 19px 11px 1px；
}
#厨房标签{
利润率：10px 5px 20px 0；
顶部：26px；
宽度：450px；
}
厨房包装纸{
填充：0 30px；
}
.过滤器{
边框：1px实心#ccc；
颜色：#333333；
浮动：左；
字体大小：12px；
边际：0 12像素0；
填充：5px15px；
文本对齐：居中；
文字装饰：无；
-webkit边界半径：3px；
-moz边界半径：3px