点击隐藏父div

点击放大图片并移动它们，使它们不会脱离页面。每个黑色图片背后都有一个父级div，因此当我悬停时，我可以更改图片的不透明度，使其看起来像变黑。所有这些工作都很好，但是，当我放大并移动照片时，留下了一个黑盒子。我需要那个消失，但是当我尝试它时，这个孩子的图片也消失了。点击隐藏父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); 

} 

});

来源

2013-10-26 Andrew

放的jsfiddle链接。 –

在动画结束了PIC onclick事件

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

添加这儿是个小提琴。

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

来源

2013-10-26 06:52:05 Red2678

这适用于图片放大时的情况，但将第二个onClick事件留下黑色背景，将图片恢复为原始大小，导致它在悬停时显得不正确。我添加了你的代码和一行来解决这个问题。这里是最后的工作代码小提琴：http://jsfiddle.net/Td6tT/3/ – Andrew

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

来源

2013-10-28 03:55:01

回答

相关问题