[英]Hiding parent div on click
我要放大點擊圖像並移動它們,以使它們不會離開頁面。 我在每個黑色圖片的后面都有一個父div,以便在懸停時可以更改圖片的不透明度,使其看起來像是變暗。 所有這些工作都很好,但是,當我放大並移動照片時,后面有一個黑框。 我需要使它消失,但是當我嘗試它時,它也會使子照片也消失。
這是代碼,jsfiddle發布在下面
的HTML
<div id="Gpic1">
<img class='galleryPics' id='pic1' src='http://i.imgur.com/urxD24P.jpg?1'>
</div>
的CSS
#Gpic1 {
float: left;
width: 187px;
height: 280px;
margin-left: 5%;
display: inline-block;
background: black;
padding: 0;
}
#pic1{
width: 187px;
height: 280px;
}
.enlarged {
border: 10px solid #e5dbcc;
position: absolute;
-webkit-box-shadow: 7px 7px 5px rgba(50, 50, 50, 0.75);
-moz-box-shadow: 7px 7px 5px rgba(50, 50, 50, 0.75);
box-shadow: 7px 7px 5px rgba(50, 50, 50, 0.75);`
}
JQUERY
$('#Gpic1').hover(function () {
if (!$(this).find('img').hasClass('enlarged')) {
$(this).find('img').fadeTo(500, 0.5);
}
}, function () {
$(this).find('img').fadeTo(500, 1);
});
$('#pic1').click(function () {
$(this).fadeTo(0, 1);
if ($(this).hasClass('enlarged')) {
$(this).removeClass('enlarged');
$(this).stop().animate({
width: 187,
height: 280
}, 0,
function () {
$(this).parent().removeClass('ontop');
});
} else {
$(this).addClass('enlarged')
$(this).parent().addClass('ontop');
$(this).stop().animate({
width: 533,
height: 800,
left: +590,
bottom: +50
}, 200);
}
});
當您嘗試刪除#Gpic1
,即使絕對定位所有子項也將被刪除。
如果只想消除黑色背景,則可以從包含的div中刪除黑色背景。
$("#Gpic1").css("background-color", "transparent");
或者,如果您確實要刪除包含的div,則需要使圖像成為頁面上其他對象的子對象。 如果使用絕對定位,則可以使圖像成為主體對象的子級,而不是#Gpic1,這樣就可以刪除#Gpic1,並且圖像不會消失。
// move pic1 to be a child of the body so we can remove Gpic1
$("#pic1").appendTo(document.body);
$("#Gpic1").remove();
在pic onClick事件的動畫結尾添加此內容
$('#Gpic1').css('background','none');
這是一個小提琴。
$('#Gpic1').css('background','none');
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.