如何使子div上的onclick事件影響父div的透明度？

Question

我試圖修改一個jQuery插件，使背景畫是可見的，通過點擊時的連鎖反應，而不是隻是一個黑色的波紋。所以我想讓波紋影響白色柱子的透明度。我不確定這是否可能。這裏有一個快速SS說明我的意思：http://oi60.tinypic.com/34xhkdk.jpg。

http://codepen.io/anon/pen/gbOQOX

非常感謝任何見解。

的代碼：

HTML：

<h1>Ripple Click Effect</h1> 
<ul> 
    <li><a>Dashboard</a></li> 
    <li><a>My Account</a></li> 
    <li><a>Direct Messages</a></li> 
    <li><a>Chat Rooms</a></li> 
    <li><a>Settings</a></li> 
    <li><a>Logout</a></li> 
</ul> 

<!-- jQuery --> 
<script src="http://thecodeplayer.com/u/js/jquery-1.9.1.min.js" type="text/javascript"></script> 

CSS：

/*custom fonts - Bitter, Montserrat*/ 
@import url('http://fonts.googleapis.com/css?family=Montserrat|Bitter'); 
/*basic reset*/ 
* {margin: 0; padding: 0;} 
body { 
    background: url('http://wallpaper4me.com/images/wallpapers/greekpainting-361526.jpeg') no-repeat center center fixed; 
    background-size: cover; 
} 

/*nav styles*/ 
ul { 
    background: rgba(255,255,255,1); border-top: 6px solid #70C2C2; 
    width: 600px; margin: 0 auto; 
} 
ul li { 
    list-style-type: none; 
    /*relative positioning for list items along with overflow hidden to contain the overflowing ripple*/ 
    position: relative; 
    overflow: hidden; 
} 
ul li a { 
    font: normal 14px/28px Montserrat; color: #3D8F8F; 
    display: block; padding: 10px 15px; 
    text-decoration: none; 
    cursor: pointer; /*since the links are dummy without href values*/ 
    /*prevent text selection*/ 
    user-select: none; 
    /*static positioned elements appear behind absolutely positioned siblings(.ink in this case) hence we will make the links relatively positioned to bring them above .ink*/ 
    position: relative; 
} 

/*.ink styles - the elements which will create the ripple effect. The size and position of these elements will be set by the JS code. Initially these elements will be scaled down to 0% and later animated to large fading circles on user click.*/ 
.ink { 
    display: block; position: absolute; 
    background: rgba(0,0,0,1); 
    border-radius: 100%; 
    transform: scale(0); 
} 
/*animation effect*/ 
.ink.animate {animation: ripple 0.65s linear;} 
@keyframes ripple { 
    /*scale the element to 250% to safely cover the entire link and fade it out*/ 
    100% {opacity: 0; transform: scale(1.5);} 
} 

的jquery：

//jQuery time 
var parent, ink, d, x, y; 
$("ul li a").click(function(e){ 
    parent = $(this).parent(); 
    //create .ink element if it doesn't exist 
    if(parent.find(".ink").length == 0) 
     parent.prepend("<span class='ink'></span>"); 

    ink = parent.find(".ink"); 
    //incase of quick double clicks stop the previous animation 
    ink.removeClass("animate"); 

    //set size of .ink 
    if(!ink.height() && !ink.width()) 
    { 
     //use parent's width or height whichever is larger for the diameter to make a circle which can cover the entire element. 
     d = Math.max(parent.outerWidth(), parent.outerHeight()); 
     ink.css({height: d, width: d}); 
    } 

    //get click coordinates 
    //logic = click coordinates relative to page - parent's position relative to page - half of self height/width to make it controllable from the center; 
    x = e.pageX - parent.offset().left - ink.width()/2; 
    y = e.pageY - parent.offset().top - ink.height()/2; 

    //set the position and add class .animate 
    ink.css({top: y+'px', left: x+'px'}).addClass("animate"); 
}) 

Answer 1

演示：http://codepen.io/placidcow/pen/ogNRKL

說明：

而不是附加這是在您單擊點爲中心的範圍，只是增長和淡入淡出，有三個跨度：

1. 一說退縮從點擊點向左
2. 一箇中，生長向外
3. 一個所述噸之間收縮回到右

的間隙中心三個跨度給人的印象是透明的波紋。 （梯度用於使透明度看起來逐漸變小，而不是丟失的矩形移動

最重要的是，一個額外的動畫應用於li從透明背景淡出到一個固體，所以波紋似乎逐漸消失，而不是是移動，然後突然間一切都將恢復

編輯的CSS：

ul { 
    /*no background otherwise can't see through the links!*/ 
} 
ul li { 
    /*add background to this instead!*/ 
    background: #fff; 
} 
.ink { 
    background: rgba(255,255,255,1); 
    /*gradient*/ 
    background: linear-gradient(to left, transparent, #fff, #fff); 
} 
.rink { 
    display: block; position: absolute; 
    background: rgba(255,255,255,1); 
    border-radius: 100%; 
    background: linear-gradient(to right, transparent, #fff, #fff); 
} 

/*animation effect*/ 
.ink.animate { 
    transform-origin: 0 50%; 
    animation: ripple 0.65s linear; 
} 
.rink.animater { 
    transform-origin: 100% 50%; 
    animation: ripple 0.65s linear; 
} 
.cink.animate2 { 
    animation: ripple2 0.65s linear; 
} 
.recover { 
    animation: fade 0.65s linear; 
} 

@keyframes fade { 
    0% {background: transparent;} 
    100% { background: #fff;} 
} 

@keyframes ripple { 
    100% {opacity: 1; transform: scale(0.1);} 
} 

@keyframes ripple2 { 
    100% {opacity: 1; transform: scale(2.5);} 
} 

稍新的JS：

var parent, ink, d, x, y, rink; 
$("ul li a").click(function(e){ 
    parent = $(this).parent(); 

this.parentNode.style.background = 'transparent'; 

    if(parent.find(".ink").length == 0) 
    parent.prepend("<span class='ink'></span>"); //left slide 
    if(parent.find(".rink").length == 0) 
    parent.prepend("<span class='rink'></span>"); //right slide 
    if(parent.find(".cink").length == 0) 
    parent.prepend("<span class='cink'></span>"); //centre slide 

    ink = parent.find(".ink"); 
    rink = parent.find(".rink"); 
    cink = parent.find(".cink"); 

    //in case of quick double clicks stop the previous animation 
    ink.removeClass("animate"); 
    rink.removeClass("animater"); 
    cink.removeClass("animate2"); 
    parent.removeClass("recover"); 

    if(!ink.height() && !ink.width()) { 
    d = Math.max(parent.outerWidth(), parent.outerHeight()); 
    ink.css({height: d, width: d}); 
    rink.css({height: d, width: d}); 
    cink.css({height: d, width: d/5}); 
    } 

    parent.addClass("recover"); 

    //centre slide: 
    x = e.pageX - parent.offset().left - cink.width()/2; 
    y = e.pageY - parent.offset().top - cink.height()/2; 

    //set the position and add class .animate 
    cink.css({top: y+'px', left: x+'px'}).addClass("animate2"); 


    //left and right slides positions, widths and animation: 
    x = -20; 
    y = e.pageY - parent.offset().top - ink.height()/2; 

    //set widths so fit edges/reach click point 
    ink.css({width:e.pageX-parent.offset().left/2}); 
    rink.css({width:parent.width()-e.pageX+parent.offset().left+20}); 

    //set the position and add class .animate 
    ink.css({top: y+'px', left: x+'px'}).addClass("animate"); 
    x=e.pageX-parent.offset().left; 
    rink.css({top: y+'px', left: x+'px'}).addClass("animater"); 

    //need cleaner way to reset back colour! 
    var self = this; 
    setTimeout(function() { self.parentNode.style.background = '#fff';},650); 
})