有没有一种方法可以向jQuery添加平滑/轻松过渡效果？

Question

I have this code to modify the position of an element on my page when user scrolls page a certain position of the page:

<script type="text/javascript">
jQuery(window).scroll(function() {
  if(jQuery(window).scrollTop() > 150) {
    jQuery("#tab_toggle #tab_toggle_bg").attr("style","top: 45% !important"); 
  } else {
    jQuery("#tab_toggle #tab_toggle_bg").removeAttr("style"); 
  }
});
</script>

Is there a way to add an effect similar to the CSS transition: all 0.5s ease to this when the scrollTop effect triggers?

Answer 1

As long as you have access to the CSS file and are allowed to edit it, the simplest way to achieve the easing effect would be to add the required transition setting to the element via CSS. Any transition setting that is added to the element via CSS will remain applicable for property changes done through JavaScript also.

 jQuery(window).scroll(function() { if (jQuery(window).scrollTop() > 50) { jQuery("#tab_toggle #tab_toggle_bg").attr("style", "top: 45% !important"); } else { jQuery("#tab_toggle #tab_toggle_bg").removeAttr("style"); } }); 

 #tab_toggle { width: 100%; height: 500px; position: relative; } #tab_toggle_bg { position: absolute; background: red; color: white; text-align: center; line-height: 140px; width: 140px; height: 140px; top: 0%; /* an initial value for the property that needs to be transitioned is also required */ transition: all 0.5s ease; /* add the required timing function - ease, ease-in, ease-in-out, linear */ } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="tab_toggle"> <div id="tab_toggle_bg"> Scroll the page for more than 50px. </div> </div>