Есть ли способ добавить плавный/легкость перехода к jQuery?

У меня есть этот код, чтобы изменить положение элемента на моей странице, когда пользователь прокручивает страницу определенной позиции страницы:Есть ли способ добавить плавный/легкость перехода к jQuery?

<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>

Есть ли способ, чтобы добавить эффект, схожий с CSS transition: all 0.5s ease к этому, когда срабатывает эффект scrollTop?

источник

2016-01-10 David Z

Вы действительно должны использовать свойство «CSS» из JQuery вместо добавления атрибута стиля – Varun

вы не можете использовать CSS свойство, чтобы добавить! Важный –

Вы можете использовать .animate функцию JQuery, но Я не уверен, что он позволит вам добавить важный атрибут! – Varun

До тех пор, пока у вас есть доступ к файлу CSS и разрешено его редактировать, самым простым способом добиться эффекта ослабления было бы добавить необходимый элемент transition к элементу через CSS. Любой параметр перехода, который добавляется к элементу через CSS, останется применимым и для изменений свойств, сделанных с помощью JavaScript.

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>

источник

2016-01-10 15:00:02 Harry

Есть ли способ добавить плавный/легкость перехода к jQuery?

ответ

Смежные вопросы