javascript - TweenMax at function out - 如何实现条件？

Question

我正在使用 JS 库:GSAP 以及 Jan Paepke 的 ScrollMagic.io。

Scrollmagic.io 允许我在到达某个触发元素时在滚动时触发一些 CSS 更改，JS 脚本如下所示:

var controller = new ScrollMagic.Controller();
                        var scene = new ScrollMagic.Scene({
                                triggerElement: "#trigger1"
                            })
                            .setTween(new TimelineMax().add([
                                TweenMax.to("header", 0.5, {backgroundColor: "rgba(40,80,01, 0.95)", height:"6%", width:"100%", top:"0", borderRadius:"0px"}),
                                TweenMax.to(".headernav", 0.5, {color:"white", fontSize:"1.5em", marginTop:"10px"}),
                                TweenMax.to(".circle", 0.5, {height:"35px", marginTop:"10px"}),
                                TweenMax.to("#logo", 0.5, {width:"70px", marginTop:"-10px", marginRight:"500px"})
                            ]))
                            .addTo(controller);

一般来说 - 一旦它滚动到网站的白色区域，它就会改变我的菜单的位置、背景颜色和字体颜色，这样它仍然会很明显并且易于阅读。

问题是我在菜单中的a:hover 停止工作。 我找到了一个解决方法:

$("#verticalnav p").hover(over, out);

     function over(){
          TweenMax.to(this, 0.5, {color:"rgb(181, 171, 171)", scale:"1.1"})
     }

     function out(){
          TweenMax.to(this, 0.5, {color:"rgb(105, 105, 105)", scale:"1"})
     }

这使它工作正常，但仍有一件事需要解决 - 虽然菜单背景为“白色”，但颜色:字体的“dimgray”很明显/可读，但它也将保持“dimgray”滚动后的绿色背景。

为了更清楚地显示，这里有截图说明:

没有悬停的默认菜单状态:

On:hover using js - 使用上面显示的脚本更改颜色:

这里菜单的一些属性和字体颜色都发生了变化，以便在绿色背景下更具可读性:

这是当鼠标OUT 链接时的样子，由于脚本使它成为“dimgray”，所以它看起来像这样:

我的问题是 - 我如何在这个脚本中实现条件:

$("#verticalnav p").hover(over, out);

 function over(){
      TweenMax.to(this, 0.5, {color:"rgb(181, 171, 171)", scale:"1.1"})
 }

 function out(){
      TweenMax.to(this, 0.5, {color:"rgb(105, 105, 105)", scale:"1"})
 }

以便它读取当前颜色值并根据该值以特定颜色运行 TweenMax.to？ 我对 JS 相当陌生，所以任何类型的建议都将不胜感激。

问候， 达米安。

Answer 1

事实上，似乎越久没有得到答案，我就越有创意。

已经解决了，几乎需要基本的 JS/jQuery，发布它以便以后有人可以使用它。 这是函数悬停的工作代码:

                            $("#verticalnav p").hover(over, out);

                        function over(){
                          TweenMax.to(this, 0.5, {color:"rgb(181, 171, 171)", scale:"1.1"})
                        };

                        function out(){
                            var kolor = $("header").css("background-color");
                            if (kolor == "rgba(255, 255, 255, 0.901961)") {
                          TweenMax.to(this, 0.5, {color:"rgb(105, 105, 105)", scale:"1"})
                          }
                            else {
                              TweenMax.to(this, 0.5, {color:"white", scale:"1"})  
                            }
                        };