我的问题:我对 Jquery 相当'.visible'
陌生,一旦动画完成,我正试图将类附加到“.content”div。
每个图像 div 都包含一个图像作为封面,该封面会增长以填充整个区域。
本质上,每个内容 div 都有额外的文本内容,我只想在用户单击父元素后出现,然后在第二次单击时淡出,因为父元素返回到原始大小。
我正在这样做,而不是试图设置一个不透明度值,因为我想保持它跨浏览器兼容。
我尝试的解决方案:我一直在玩,.children().addClass('visible')
但没有运气。我相当确定我犯了一个新手错误,但是在搜索 Stackoverflow 和其他网站之后,我无法找到解决这种情况的答案(尽管这可能是通过我的错误搜索)。
到目前为止的Jquery代码:
$(window).load(function(){
$(".image").bind('click', function() {
var that = $(this),
offsets = that.position(),
top = offsets.top,
left = offsets.left,
clone = that.clone(),
parent = that.parent(),
width = parent.width(),
height = parent.height();
clone.addClass('clone').appendTo(parent).css({
'top': top,
'left': left
}).animate({
'top': 0,
'left': 0,
'width': width,
'height': height,
}, 1000).click(function(){
$(this).fadeOut().siblings().animate({
'opacity': 1
}, 1000);
}).siblings().animate({
'opacity': 0.1
}, 1000);
});
});
希望我已经发布了足够的信息,但如果有帮助,我也很乐意分享 html 和 css。
相关的 CSS 类是:
.content {
filter:alpha(opacity=0);
-moz-opacity:0;
-khtml-opacity:0;
opacity: 0;
}
.visible {
filter:alpha(opacity=100);
-moz-opacity:1;
-khtml-opacity:1;
opacity: 1;
}
.wrap {
height: 725px;
width: 974px;
margin: 0 auto;
vertical-align: top;
position: relative;
}
.image {
height: 233px;
width: 233px;
display:inline-block;
vertical-align: top;
margin: 0 11px 11px 0;
background-size: cover;
border: 1px solid #000000;
}
抱歉,如果我对我的任何问题报告不准确,并提前感谢您的帮助。