jquery - Fade In/Out on Scroll Not Working In Safari -
i have below code fades images in scroll down , fades them out when scroll up:
<script> jquery(window).on("load",function() { jquery(window).scroll(function() { var windowbottom = jquery(this).scrolltop() + jquery(this).innerheight(); jquery(".lookbook").each(function() { /* check location of each desired element */ var objecttop = jquery(this).offset().top + jquery(this).outerheight(); /* if element within bounds of window, fade in */ if (objecttop -500 < windowbottom) { //object comes view (scrolling down) if (jquery(this).css("opacity")==0.4) {jquery(this).fadeto(1500,1.0);} } else { //object goes out of view (scrolling up) if (jquery(this).css("opacity")==1.0) {jquery(this).fadeto(1500,0.4);} } }); }).scroll(); //invoke scroll-handler on page-load }); </script> <style> .lookbook {opacity:0.4;} </style>
this works fine when test in chrome , firefox not in safari. reason if change opacity 0 work in safari i.e.
<script> jquery(window).on("load",function() { jquery(window).scroll(function() { var windowbottom = jquery(this).scrolltop() + jquery(this).innerheight(); jquery(".lookbook").each(function() { /* check location of each desired element */ var objecttop = jquery(this).offset().top + jquery(this).outerheight(); /* if element within bounds of window, fade in */ if (objecttop -500 < windowbottom) { //object comes view (scrolling down) if (jquery(this).css("opacity")==0) {jquery(this).fadeto(1500,1.0);} } else { //object goes out of view (scrolling up) if (jquery(this).css("opacity")==1.0) {jquery(this).fadeto(1500,0);} } }); }).scroll(); //invoke scroll-handler on page-load }); </script> <style> .lookbook {opacity:0;} </style>
any ideas why isn't working in safari when set opacity 0.4?
i testing in safari 10.1.2.
just suggestion here: why not check class
being present on object , define bot classes. if it, ensure class has cross-browsing capabilities opacity
prop. check https://css-tricks.com/snippets/css/cross-browser-opacity/ ... if it... have:
.transparent_class { /* ie 8 */ -ms-filter: "progid:dximagetransform.microsoft.alpha(opacity=40)"; /* ie 5-7 */ filter: alpha(opacity=40); /* netscape */ -moz-opacity: 0.4; /* safari 1.x */ -khtml-opacity: 0.4; /* browsers */ opacity: 0.4; } .visible_class { /* ie 8 */ -ms-filter: "progid:dximagetransform.microsoft.alpha(opacity=100)"; /* ie 5-7 */ filter: alpha(opacity=100); /* netscape */ -moz-opacity: 1.0; /* safari 1.x */ -khtml-opacity: 1.0; /* browsers */ opacity: 1.0; }
and js code may check class being present, instead of having prop.
if (jquery(this).hasclass("transparent_class")) {jquery(this).addclass("visible_class", 1500).removeclass("transparent_class");}
hope works you.
Comments
Post a Comment