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

我正在尝试修改jquery插件，以便在单击时可以通过涟漪效果看到背景绘画，而不仅仅是黑色涟漪。因此，我希望波纹影响白色列的透明度。我甚至不确定这是否可能。这里有一个快速的SS来说明我的意思：

非常感谢你的洞察力

守则：

html:

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");
})

//jQuery时间
变量父项、墨水、d、x、y；
$（“ul li a”）。单击（功能（e）{
parent=$（this.parent（）；
//如果不存在，则创建.ink元素
if（parent.find（“.ink”）.length==0）
父项。前置（“”）；
ink=父项。查找（“.ink”）；
//如果快速双击，请停止上一个动画
ink.removeClass（“动画”）；
//设置墨水的大小
如果（！ink.height（）&&！ink.width（））
{
//使用父元素的宽度或高度（以直径较大者为准），形成一个可以覆盖整个元素的圆。
d=Math.max（parent.outerWidth（），parent.outerHeight（））；
css（{高度：d，宽度：d}）；
}
//获取单击坐标
//逻辑=点击相对于页面的坐标-家长相对于页面的位置-自身高度/宽度的一半，使其从中心可控；
x=e.pageX-parent.offset（）.left-ink.width（）/2；
y=e.pageY-parent.offset（）.top-ink.height（）/2；
//设置位置并添加类。设置动画
css（{top:y+'px'，left:x+'px'}）.addClass（“animate”）；
})

演示：

说明：

与其附加一个以您单击的点为中心的跨距，而只是增长和衰减，不如添加三个跨距：

从单击点向左收缩的一个

在中心向外生长的人

收缩回右边的一个

三个跨度之间的间隙给人一种透明波纹的印象。（用于使透明度逐渐变暗的渐变，而不是缺少移动的矩形

最重要的是，对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);}
}

Newish 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);
})

var父项、墨水、d、x、y、溜冰场；
$（“ul li a”）。单击（功能（e）{
parent=$（this.parent（）；
this.parentNode.style.background='transparent'；
if（parent.find（“.ink”）.length==0）
parent.prepend（“”；//左幻灯片
if（parent.find（“.rink”）.length==0）
parent.prepend（“”；//右幻灯片
if（parent.find（“.cink”）.length==0）
parent.prepend（“”；//中间幻灯片
ink=父项。查找（“.ink”）；
溜冰场=父级。查找（“.rink”）；
cink=parent.find（“.cink”）；
//如果快速双击，请停止上一个动画
ink.removeClass（“动画”）；
溜冰场removeClass（“动画师”）；
cink.removeClass（“animate2”）；
父类。removeClass（“恢复”）；
如果（！ink.height（）&&！ink.width（））{
d=Math.max（parent.outerWidth（），parent.outerHeight（））；
css（{高度：d，宽度：d}）；
css（{高度：d，宽度：d}）；
css（{高度：d，宽度：d/5}）；
}
父类。addClass（“恢复”）；
//中间幻灯片：
x=e.pageX-parent.offset（）.left-cink.width（）/2；
y=e.pageY-parent.offset（）.top-cink.height（）/2；
//设置位置并添加类。设置动画
css（{top:y+'px'，left:x+'px'}）.addClass（“animate2”）；
//左右幻灯片位置、宽度和动画：
x=-20；
y=e.pageY-parent.offset（）.top-ink.height（）/2；
//设置宽度以适合边缘/到达单击点
css（{宽度：e.pageX-parent.offset（）.left/2}）；
css（{width:parent.width（）-e.pageX+parent.offset（）.left+20}）；
//设置位置并添加类。设置动画
css（{top:y+'px'，left:x+'px'}）.addClass（“animate”）；
x=e.pageX-parent.offset（）.左；
css（{top:y+'px'，left:x+'px'}）.addClass（“动画师”）；
//需要更干净的方式来重置背面颜色！
var self=这个；
setTimeout（函数（）{self.parentNode.style.background='#fff'}，650）；
})

---

我不知道要从原始版本中添加或删除什么。请将codepen链接挂起，或向我展示您使用的所有代码。非常感谢您的帮助！抱歉，我迟到了，但所有这些都没有什么帮助！希望codepen演示会清除大部分内容

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);}
}

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);
})