我有点在我的设计右侧建立一个固定的导航栏，位置固定，我使用jquery来切换第一类display：none，另一个使用display：block。
当代码滚过时说300px高度侧边栏显示它是否隐藏。
但是当它滚动过去说300px高时，侧边栏会自动显示而没有过渡效果，我已经为我的设计生成了过渡样式但似乎没有用，请我需要帮助。
这是我的代码
jQuery(document).ready(function($){
// browser window scroll (in pixels) after which the "back to top" link is shown
var offset = 300,
//browser window scroll (in pixels) after which the "back to top" link opacity is reduced
offset_opacity = 1200,
//duration of the top scrolling animation (in ms)
scroll_top_duration = 700,
//grab the "back to top" link
$back_to_top = $('.even-more-sq-rt');
//hide or show the "back to top" link
$(window).scroll(function(){
( $(this).scrollTop() > offset ) ? $back_to_top.addClass('even-more-post-visible') : $back_to_top.removeClass('even-more-post-visible');
});
});
.even-more-sq-rt {
width: 300px !important;
max-height: 350px;
position: fixed;
z-index: 999;
right: 0px;
bottom: 20px;
top: 10px;
background: white;
-webkit-border-radius: 30px;
-moz-border-radius: 30px;
border-radius: 0px;
margin-bottom: 60px;
padding: 20px;
border: 1px solid #ddd;
border-right-width: 1px;
border-right-style: solid;
border-right-color: rgb(221, 221, 221);
border-right: 0px;
}
.even-more-sq-rt-postmeta h3 {
font-size: 17px;
padding-top: 10px;
}
.even-more-sq-rt-thumb.img-responsive {
height: 145px;
overflow: hidden;
}
.even-more-sq-rt {
text-align: center;
}
.close-btn {
position: absolute;
right: 0;
top: 0;
background: #333;
border: 0px;
padding: 3px 11px;
color: #fff;
}
.even-more-sq-rt h3 {
margin-top: 0px;
font-size: 17px;
}
.even-more-sq-rt {
display: none;
transition: all 12s ease-in 5s;
}
.even-more-post-visible {
display: block;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h3> some space </h3>
<h3> some space </h3>
<h3> some space </h3>
<h3> some space </h3>
<h3> some space </h3>
<h3> some space </h3>
<h3> some space </h3>
<h3> some space </h3>
<h3> some space </h3>
<h3> some space </h3>
<h3> some space </h3>
<h3> some space </h3>
<h3> some space </h3>
<h3> some space </h3>
<h3> some space </h3>
<h3> some space </h3>
<h3> some space </h3>
<h3> some space </h3>
<h3> some space </h3>
<h3> some space </h3>
<h3> some space </h3>
<h3> some space </h3>
<h3> some space </h3>
<h3> some space </h3>
<h3> some space </h3>
<h3> some space </h3>
<h3> some space </h3>
<h3> some space </h3>
<h3> some space </h3>
<h3> some space </h3>
<h3> some space </h3>
<h3> some space </h3>
<h3> some space </h3>
<h3> some space </h3>
<h3> some space </h3>
<h3> some space </h3>
<h3> some space </h3>
<h3> some space </h3>
<h3> some space </h3>
<h3> some space </h3>
<h3> some space </h3>
<h3> some space </h3>
<h3> some space </h3>
<h3> some space </h3>
<h3> some space </h3>
<h3> some space </h3>
<h3> some space </h3>
<h3> some space </h3>
<h3> some space </h3>
<h3> some space </h3>
<h3> some space </h3>
<h3> some space </h3>
<h3> some space </h3>
<h3> some space </h3>
<h3> some space </h3>
<h3> some space </h3>
<div class="even-more-sq-rt">
<h3>Trending Now</h3>
<button class="close-btn">X</button>
<div class="even-more-sq-rt-inner clearfix">
<div class="even-more-sq-rt-thumb img-responsive">
<img src="http://placehold.it/259x145">
</div>
<div class="even-more-sq-rt-postmeta">
<h3><a href="#"> when there is no more words to say : silence is golden</a></h3>
</div>
</div>
</div>
这是我想要添加的过渡：
-webkit-transition: right 500ms cubic-bezier(0.265, 0.365, 0.26, 0.865);
-moz-transition: right 500ms cubic-bezier(0.265, 0.365, 0.26, 0.865);
-o-transition: right 500ms cubic-bezier(0.265, 0.365, 0.26, 0.865);
transition: right 500ms cubic-bezier(0.265, 0.365, 0.26, 0.865);
transition-timing-function: cubic-bezier(0.265, 0.365, 0.26, 0.865);
-webkit-transition-timing-function: cubic-bezier(0.265, 0.365, 0.26, 0.865);
-moz-transition-timing-function: cubic-bezier(0.265, 0.365, 0.26, 0.865);
-o-transition-timing-function: cubic-bezier(0.265, 0.365, 0.26, 0.865);
transition-timing-function: cubic-bezier(0.265, 0.365, 0.26, 0.865);
答案 0 :(得分：0)
你在寻找什么样的东西，我唯一能做的就是添加一个css3动画并将其添加到更加明显的后期风格中。
jQuery(document).ready(function($){
// browser window scroll (in pixels) after which the "back to top" link is shown
var offset = 300,
//browser window scroll (in pixels) after which the "back to top" link opacity is reduced
offset_opacity = 1200,
//duration of the top scrolling animation (in ms)
scroll_top_duration = 700,
//grab the "back to top" link
$back_to_top = $('.even-more-sq-rt');
//hide or show the "back to top" link
$(window).scroll(function(){
( $(this).scrollTop() > offset ) ? $back_to_top.addClass('even-more-post-visible') : $back_to_top.removeClass('even-more-post-visible');
});
});.even-more-sq-rt {
width: 300px !important;
max-height: 350px;
position: fixed;
z-index: 999;
right: 0px;
bottom: 20px;
top: 10px;
background: white;
-webkit-border-radius: 30px;
-moz-border-radius: 30px;
border-radius: 0px;
margin-bottom: 60px;
padding: 20px;
border: 1px solid #ddd;
border-right-width: 1px;
border-right-style: solid;
border-right-color: rgb(221, 221, 221);
border-right: 0px;
}
.even-more-sq-rt-postmeta h3 {
font-size: 17px;
padding-top: 10px;
}
.even-more-sq-rt-thumb.img-responsive {
height: 145px;
overflow: hidden;
}
.even-more-sq-rt {
text-align: center;
}
.close-btn {
position: absolute;
right: 0;
top: 0;
background: #333;
border: 0px;
padding: 3px 11px;
color: #fff;
}
.even-more-sq-rt h3 {
margin-top: 0px;
font-size: 17px;
}
.even-more-sq-rt {
display: none;
transition: all 12s ease-in 5s;
}
.even-more-post-visible {
display: block;
animation: fadein 2s;
}
@keyframes fadein {
from {
opacity:0;
}
to {
opacity:1;
}
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h3> some space </h3>
<h3> some space </h3>
<h3> some space </h3>
<h3> some space </h3>
<h3> some space </h3>
<h3> some space </h3>
<h3> some space </h3>
<h3> some space </h3>
<h3> some space </h3>
<h3> some space </h3>
<h3> some space </h3>
<h3> some space </h3>
<h3> some space </h3>
<h3> some space </h3>
<h3> some space </h3>
<h3> some space </h3>
<h3> some space </h3>
<h3> some space </h3>
<h3> some space </h3>
<h3> some space </h3>
<h3> some space </h3>
<h3> some space </h3>
<h3> some space </h3>
<h3> some space </h3>
<h3> some space </h3>
<h3> some space </h3>
<h3> some space </h3>
<h3> some space </h3>
<h3> some space </h3>
<h3> some space </h3>
<h3> some space </h3>
<h3> some space </h3>
<h3> some space </h3>
<h3> some space </h3>
<h3> some space </h3>
<h3> some space </h3>
<h3> some space </h3>
<h3> some space </h3>
<h3> some space </h3>
<h3> some space </h3>
<h3> some space </h3>
<h3> some space </h3>
<h3> some space </h3>
<h3> some space </h3>
<h3> some space </h3>
<h3> some space </h3>
<h3> some space </h3>
<h3> some space </h3>
<h3> some space </h3>
<h3> some space </h3>
<h3> some space </h3>
<h3> some space </h3>
<h3> some space </h3>
<h3> some space </h3>
<h3> some space </h3>
<h3> some space </h3>
<div class="even-more-sq-rt">
<h3>Trending Now</h3>
<button class="close-btn">X</button>
<div class="even-more-sq-rt-inner clearfix">
<div class="even-more-sq-rt-thumb img-responsive">
<img src="http://placehold.it/259x145">
</div>
<div class="even-more-sq-rt-postmeta">
<h3><a href="#"> when there is no more words to say : silence is golden</a></h3>
</div>
</div>
</div>