javascript - 单击时隐藏父 div

Question

我在点击时放大图像并移动它们，这样它们就不会离开页面。我在每个黑色图片后面都有一个父 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);`
}

查询

 $('#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);

 }

 });

Answer 1

当您尝试删除#Gpic1时，所有子项都会被删除，即使它们是绝对定位的。

如果你只是想让黑色背景消失，你可以从包含的 div 中删除黑色背景。

$("#Gpic1").css("background-color", "transparent");

或者，如果您真的想删除包含的 div，那么您需要使图像成为页面上其他对象的子对象。如果您使用的是绝对定位，那么您可以将图像设置为 body 对象的子对象而不是 #Gpic1，这样您就可以删除 #Gpic1 并且图像不会消失。

// move pic1 to be a child of the body so we can remove Gpic1
$("#pic1").appendTo(document.body);
$("#Gpic1").remove();

Answer 2

将此添加到图片 onClick 事件的动画末尾

$('#Gpic1').css('background','none');

这是一个小提琴。

http://jsfiddle.net/Td6tT/3/

Answer 3

$('#Gpic1').css('background','none');