Warning: file_get_contents(/data/phpspider/zhask/data//catemap/9/javascript/473.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript TweenMax at函数输出-如何实现条件输出?_Javascript_Jquery_Css_Gsap_Scrollmagic - Fatal编程技术网

Javascript TweenMax at函数输出-如何实现条件输出?

Javascript TweenMax at函数输出-如何实现条件输出?,javascript,jquery,css,gsap,scrollmagic,Javascript,Jquery,Css,Gsap,Scrollmagic,我正在使用JS库:GSAP以及Jan Paepke的ScrollMagic.io Scrollmagic.io允许我在达到某个触发元素时触发一些CSS更改,JS脚本如下所示: var controller = new ScrollMagic.Controller(); var scene = new ScrollMagic.Scene({ triggerElement: "#

我正在使用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"})
     }
这使得它可以正常工作,但还有一件事需要解决——虽然菜单的背景是“白色”,但字体的颜色“浅灰色”是很明显的/可读的,但在滚动后,它也将在绿色背景上保持“浅灰色”

这里有一个屏幕截图说明,可以更清楚地显示它:

无悬停的默认菜单状态:

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

此处,菜单的某些属性随着字体颜色的变化而变化,以便在绿色背景下更具可读性:

下面是当鼠标离开链接时的样子,因为脚本使它变为“灰色”:

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

$("#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相当了解,所以任何建议都将不胜感激

问候,,
达米安。

实际上,似乎我得不到答案的时间越长,我就越有创造力

已经解决了,需要基本的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"})  
                            }
                        };