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

这使它工作正常，但还有一件事要解决 - 菜单的背景是＆＃34;白色＆＃34;，颜色：＆＃34; dimgray＆＃34;字体很明显/可读，但它也将保持＆＃34; dimgray＆＃34;在滚动后的绿色背景上。

以下屏幕截图说明更清晰地显示：

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

开：使用js悬停 - 使用上面显示的脚本更改颜色：

此处菜单的某些属性已更改以及字体颜色，以便在绿色背景上更易读：

以下是鼠标 OUT 链接时的情况，并将其留下来＆＃34; dimgray＆＃34;因为脚本使它：

我的问题是 - 如何在此脚本中实现条件：

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

TweenMax在函数输出 - 如何实现条件？

1 个答案: