javascript - 如何以平滑过渡而不是笨重的方式向图像添加类-6ren

javascript - 如何以平滑过渡而不是笨重的方式向图像添加类

转载作者：行者123 更新时间：2023-11-30 15:31:36

这是我目前工作的 jsfiddle我知道你看不到图像，但我会尽力解释我的意思。正如您所看到的，当我向下滚动时，标题本身会平滑地动画。然而，图像不会在平滑过渡中调整大小，它只是突然改变大小。如果有意义的话，我希望它的大小随标题一起明显减小。

我尝试添加过渡:所有 0.8 秒的轻松；到 header-image 类，但它没有任何效果。

非常感谢任何帮助。

HTML:

最佳答案

您没有设置图片的默认高度值。

$(document).ready(function() { 
    $(window).scroll(function() {
        if ($(this).scrollTop() > 1) {  
            $('header').addClass("scroll");
            $('.header-image').addClass("header-image-scroll");
        } else {
            $('header').removeClass("scroll");
            $('.header-image').removeClass("header-image-scroll");
        }
    });
});

body {
	font-family: 'Open Sans', sans-serif;
	background-color: #f3f3f3;
    color: #666;
    margin: 0px;
    padding: 0px;
}

#Page {
    padding-top: 100px;
}

header {
	background-color: #1c1c1b;
	font-family: 'Century gothic';
	font-size: 180%;
	height: 100px;
    width: 100%;
    border-bottom: solid;
    border-bottom-color: #009641;
    border-bottom-width: 5px;
    position: fixed;
    line-height: 50px;
    z-index: 1000;
    overflow: hidden;
    transition: all 0.8s ease;
}

.header-image {
    align-content: center;
    height: 200px;
    transition: all .5s ease;
}

.scroll {
    height: 80px; 
    font-size: 180%;
}

.header-image-scroll {
    height: 80px;
    transition: all .5s ease;
}

#center-column {
    background-color: white;
    width: 1080px;
    height: 100%;
    box-shadow: 0px 1px 5px #888888;
    margin: 0 auto;
    padding-bottom: 10px;
}

nav {
    
}

nav ul {
    text-align: center;
    display: table;
    margin: auto;
}

nav li {
    display: table-cell;
    vertical-align: middle;
    /*display: inline;*/
    padding: 0 10px;
}

nav li a {
    color: #009641;
    text-decoration: none;
}

nav li a:hover {
    color: #e2030e;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
 
    <body id="chesters">
        
        <header>
            <nav>
                <ul>
                <li><a href="Menu.html">Menu</a></li>
                <li><a href="Burritos.html">Burritos</a></li>
                    <li><a href="index.html"><img class="header-image" src="http://wallpaper-gallery.net/images/image/image-13.jpg"></a></li>
                <li><a href="Contact.html">Contact Us</a></li>
                <li><a href="About.html">About Us</a></li>   
                </ul>
            </nav>
        </header>
        
    <div id="Page">
            
    <p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus sed enim metus. Aenean suscipit imperdiet magna, vel pulvinar mauris pretium a. Nullam eleifend erat a leo sollicitudin, non consequat quam egestas. Etiam sollicitudin lectus eu nibh laoreet dapibus. Phasellus vel dui auctor tortor interdum gravida a interdum dui. Cras dapibus dui arcu, nec condimentum arcu malesuada sed. Aliquam sit amet bibendum felis, nec condimentum quam. Aenean a arcu interdum, luctus ipsum vitae, dapibus sapien.

Aenean pharetra vestibulum eros ut porttitor. Etiam fringilla augue non purus sodales feugiat. Sed at nunc et risus tempor eleifend ac non orci. Mauris a rhoncus lacus. Quisque eget malesuada risus, sed vehicula mi. Duis elementum finibus interdum. In fringilla accumsan accumsan. Curabitur sit amet tempus dolor. Aliquam erat volutpat. Praesent at luctus orci. Ut eget odio dignissim, facilisis quam ut, pharetra dolor. Duis laoreet lectus nec aliquet condimentum. Ut in tellus semper, ultricies erat convallis, eleifend sem. Phasellus lacinia euismod nulla, ac egestas ipsum hendrerit eget. Sed lacinia metus sit amet sodales mattis.

Phasellus ac leo mattis, convallis dui vitae, ultricies diam. Nunc finibus arcu mauris, rhoncus tincidunt urna condimentum ut. Proin volutpat hendrerit mi, nec euismod lorem commodo in. Maecenas aliquam viverra lectus, quis euismod tortor dapibus at. Duis nec sapien non velit interdum malesuada. Duis venenatis tellus a metus varius condimentum. Integer fringilla volutpat leo ut rutrum. Aenean gravida rhoncus mattis. Nam at convallis magna. In turpis erat, mattis et lorem sed, euismod mattis nisl. Quisque eleifend convallis massa ut semper. In elementum rhoncus massa ut fermentum. Mauris pharetra libero mi, in pretium quam vehicula in. Pellentesque et lobortis felis. Suspendisse ultrices id urna sit amet semper.

Sed suscipit faucibus massa. Fusce elementum interdum leo, ut viverra libero eleifend at. In non placerat magna. Integer scelerisque molestie dapibus. Duis tincidunt diam neque, a ullamcorper libero accumsan eget. Aliquam rhoncus diam aliquet, interdum mauris sed, hendrerit risus. Aliquam erat volutpat. Mauris euismod accumsan neque vel gravida. Aenean facilisis augue at metus ultrices, convallis eleifend lectus fringilla. Nunc porta dictum scelerisque. Morbi quis nibh vel leo sodales egestas vitae ut ligula. Quisque eu pellentesque massa. Vivamus tristique rhoncus diam, at fringilla eros fringilla at. Fusce sit amet diam lectus. Cras blandit diam id odio bibendum, et blandit risus condimentum.

Aenean porta orci id sollicitudin cursus. Pellentesque eget mauris scelerisque, efficitur odio nec, aliquet nibh. Nulla quam nisl, placerat non condimentum at, tempus non nibh. Integer faucibus ex mi, at rutrum neque auctor ut. Etiam feugiat elit lectus, ut lacinia mi rhoncus et. Mauris varius mattis metus. Integer in placerat justo, eu placerat dui. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non sem et ipsum dignissim eleifend vitae at massa. In quis odio in orci blandit scelerisque. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam neque tortor, luctus et massa non, porta egestas erat. 
    </p>
    
    <p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus sed enim metus. Aenean suscipit imperdiet magna, vel pulvinar mauris pretium a. Nullam eleifend erat a leo sollicitudin, non consequat quam egestas. Etiam sollicitudin lectus eu nibh laoreet dapibus. Phasellus vel dui auctor tortor interdum gravida a interdum dui. Cras dapibus dui arcu, nec condimentum arcu malesuada sed. Aliquam sit amet bibendum felis, nec condimentum quam. Aenean a arcu interdum, luctus ipsum vitae, dapibus sapien.

Aenean pharetra vestibulum eros ut porttitor. Etiam fringilla augue non purus sodales feugiat. Sed at nunc et risus tempor eleifend ac non orci. Mauris a rhoncus lacus. Quisque eget malesuada risus, sed vehicula mi. Duis elementum finibus interdum. In fringilla accumsan accumsan. Curabitur sit amet tempus dolor. Aliquam erat volutpat. Praesent at luctus orci. Ut eget odio dignissim, facilisis quam ut, pharetra dolor. Duis laoreet lectus nec aliquet condimentum. Ut in tellus semper, ultricies erat convallis, eleifend sem. Phasellus lacinia euismod nulla, ac egestas ipsum hendrerit eget. Sed lacinia metus sit amet sodales mattis.

Phasellus ac leo mattis, convallis dui vitae, ultricies diam. Nunc finibus arcu mauris, rhoncus tincidunt urna condimentum ut. Proin volutpat hendrerit mi, nec euismod lorem commodo in. Maecenas aliquam viverra lectus, quis euismod tortor dapibus at. Duis nec sapien non velit interdum malesuada. Duis venenatis tellus a metus varius condimentum. Integer fringilla volutpat leo ut rutrum. Aenean gravida rhoncus mattis. Nam at convallis magna. In turpis erat, mattis et lorem sed, euismod mattis nisl. Quisque eleifend convallis massa ut semper. In elementum rhoncus massa ut fermentum. Mauris pharetra libero mi, in pretium quam vehicula in. Pellentesque et lobortis felis. Suspendisse ultrices id urna sit amet semper.

Sed suscipit faucibus massa. Fusce elementum interdum leo, ut viverra libero eleifend at. In non placerat magna. Integer scelerisque molestie dapibus. Duis tincidunt diam neque, a ullamcorper libero accumsan eget. Aliquam rhoncus diam aliquet, interdum mauris sed, hendrerit risus. Aliquam erat volutpat. Mauris euismod accumsan neque vel gravida. Aenean facilisis augue at metus ultrices, convallis eleifend lectus fringilla. Nunc porta dictum scelerisque. Morbi quis nibh vel leo sodales egestas vitae ut ligula. Quisque eu pellentesque massa. Vivamus tristique rhoncus diam, at fringilla eros fringilla at. Fusce sit amet diam lectus. Cras blandit diam id odio bibendum, et blandit risus condimentum.

Aenean porta orci id sollicitudin cursus. Pellentesque eget mauris scelerisque, efficitur odio nec, aliquet nibh. Nulla quam nisl, placerat non condimentum at, tempus non nibh. Integer faucibus ex mi, at rutrum neque auctor ut. Etiam feugiat elit lectus, ut lacinia mi rhoncus et. Mauris varius mattis metus. Integer in placerat justo, eu placerat dui. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non sem et ipsum dignissim eleifend vitae at massa. In quis odio in orci blandit scelerisque. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam neque tortor, luctus et massa non, porta egestas erat. 
    </p> 
    
    <p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus sed enim metus. Aenean suscipit imperdiet magna, vel pulvinar mauris pretium a. Nullam eleifend erat a leo sollicitudin, non consequat quam egestas. Etiam sollicitudin lectus eu nibh laoreet dapibus. Phasellus vel dui auctor tortor interdum gravida a interdum dui. Cras dapibus dui arcu, nec condimentum arcu malesuada sed. Aliquam sit amet bibendum felis, nec condimentum quam. Aenean a arcu interdum, luctus ipsum vitae, dapibus sapien.

Aenean pharetra vestibulum eros ut porttitor. Etiam fringilla augue non purus sodales feugiat. Sed at nunc et risus tempor eleifend ac non orci. Mauris a rhoncus lacus. Quisque eget malesuada risus, sed vehicula mi. Duis elementum finibus interdum. In fringilla accumsan accumsan. Curabitur sit amet tempus dolor. Aliquam erat volutpat. Praesent at luctus orci. Ut eget odio dignissim, facilisis quam ut, pharetra dolor. Duis laoreet lectus nec aliquet condimentum. Ut in tellus semper, ultricies erat convallis, eleifend sem. Phasellus lacinia euismod nulla, ac egestas ipsum hendrerit eget. Sed lacinia metus sit amet sodales mattis.

Phasellus ac leo mattis, convallis dui vitae, ultricies diam. Nunc finibus arcu mauris, rhoncus tincidunt urna condimentum ut. Proin volutpat hendrerit mi, nec euismod lorem commodo in. Maecenas aliquam viverra lectus, quis euismod tortor dapibus at. Duis nec sapien non velit interdum malesuada. Duis venenatis tellus a metus varius condimentum. Integer fringilla volutpat leo ut rutrum. Aenean gravida rhoncus mattis. Nam at convallis magna. In turpis erat, mattis et lorem sed, euismod mattis nisl. Quisque eleifend convallis massa ut semper. In elementum rhoncus massa ut fermentum. Mauris pharetra libero mi, in pretium quam vehicula in. Pellentesque et lobortis felis. Suspendisse ultrices id urna sit amet semper.

Sed suscipit faucibus massa. Fusce elementum interdum leo, ut viverra libero eleifend at. In non placerat magna. Integer scelerisque molestie dapibus. Duis tincidunt diam neque, a ullamcorper libero accumsan eget. Aliquam rhoncus diam aliquet, interdum mauris sed, hendrerit risus. Aliquam erat volutpat. Mauris euismod accumsan neque vel gravida. Aenean facilisis augue at metus ultrices, convallis eleifend lectus fringilla. Nunc porta dictum scelerisque. Morbi quis nibh vel leo sodales egestas vitae ut ligula. Quisque eu pellentesque massa. Vivamus tristique rhoncus diam, at fringilla eros fringilla at. Fusce sit amet diam lectus. Cras blandit diam id odio bibendum, et blandit risus condimentum.

Aenean porta orci id sollicitudin cursus. Pellentesque eget mauris scelerisque, efficitur odio nec, aliquet nibh. Nulla quam nisl, placerat non condimentum at, tempus non nibh. Integer faucibus ex mi, at rutrum neque auctor ut. Etiam feugiat elit lectus, ut lacinia mi rhoncus et. Mauris varius mattis metus. Integer in placerat justo, eu placerat dui. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non sem et ipsum dignissim eleifend vitae at massa. In quis odio in orci blandit scelerisque. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam neque tortor, luctus et massa non, porta egestas erat. 
    </p> 
    <p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus sed enim metus. Aenean suscipit imperdiet magna, vel pulvinar mauris pretium a. Nullam eleifend erat a leo sollicitudin, non consequat quam egestas. Etiam sollicitudin lectus eu nibh laoreet dapibus. Phasellus vel dui auctor tortor interdum gravida a interdum dui. Cras dapibus dui arcu, nec condimentum arcu malesuada sed. Aliquam sit amet bibendum felis, nec condimentum quam. Aenean a arcu interdum, luctus ipsum vitae, dapibus sapien.

Aenean pharetra vestibulum eros ut porttitor. Etiam fringilla augue non purus sodales feugiat. Sed at nunc et risus tempor eleifend ac non orci. Mauris a rhoncus lacus. Quisque eget malesuada risus, sed vehicula mi. Duis elementum finibus interdum. In fringilla accumsan accumsan. Curabitur sit amet tempus dolor. Aliquam erat volutpat. Praesent at luctus orci. Ut eget odio dignissim, facilisis quam ut, pharetra dolor. Duis laoreet lectus nec aliquet condimentum. Ut in tellus semper, ultricies erat convallis, eleifend sem. Phasellus lacinia euismod nulla, ac egestas ipsum hendrerit eget. Sed lacinia metus sit amet sodales mattis.

Phasellus ac leo mattis, convallis dui vitae, ultricies diam. Nunc finibus arcu mauris, rhoncus tincidunt urna condimentum ut. Proin volutpat hendrerit mi, nec euismod lorem commodo in. Maecenas aliquam viverra lectus, quis euismod tortor dapibus at. Duis nec sapien non velit interdum malesuada. Duis venenatis tellus a metus varius condimentum. Integer fringilla volutpat leo ut rutrum. Aenean gravida rhoncus mattis. Nam at convallis magna. In turpis erat, mattis et lorem sed, euismod mattis nisl. Quisque eleifend convallis massa ut semper. In elementum rhoncus massa ut fermentum. Mauris pharetra libero mi, in pretium quam vehicula in. Pellentesque et lobortis felis. Suspendisse ultrices id urna sit amet semper.

Sed suscipit faucibus massa. Fusce elementum interdum leo, ut viverra libero eleifend at. In non placerat magna. Integer scelerisque molestie dapibus. Duis tincidunt diam neque, a ullamcorper libero accumsan eget. Aliquam rhoncus diam aliquet, interdum mauris sed, hendrerit risus. Aliquam erat volutpat. Mauris euismod accumsan neque vel gravida. Aenean facilisis augue at metus ultrices, convallis eleifend lectus fringilla. Nunc porta dictum scelerisque. Morbi quis nibh vel leo sodales egestas vitae ut ligula. Quisque eu pellentesque massa. Vivamus tristique rhoncus diam, at fringilla eros fringilla at. Fusce sit amet diam lectus. Cras blandit diam id odio bibendum, et blandit risus condimentum.

Aenean porta orci id sollicitudin cursus. Pellentesque eget mauris scelerisque, efficitur odio nec, aliquet nibh. Nulla quam nisl, placerat non condimentum at, tempus non nibh. Integer faucibus ex mi, at rutrum neque auctor ut. Etiam feugiat elit lectus, ut lacinia mi rhoncus et. Mauris varius mattis metus. Integer in placerat justo, eu placerat dui. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non sem et ipsum dignissim eleifend vitae at massa. In quis odio in orci blandit scelerisque. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam neque tortor, luctus et massa non, porta egestas erat. 
    </p>      
    
    </div> <!-- Page -->
        
    </body>

关于javascript - 如何以平滑过渡而不是笨重的方式向图像添加类，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42175745/

文章推荐： c - MSP430 函数调用被跳过

文章推荐： C# 从 URL 中读取文件信息

文章推荐： c - 尝试通过冒泡排序对名称链接列表进行排序时出现段错误

ggplot2 - 平滑 geom_ribbon
我用 geom_line 和 geom_ribbon 创建了一个图(图 1)，结果还不错，但为了美观，我希望线条和丝带更平滑。我知道我可以使用 geom_smooth 作为线条(图 2)，但我不确定是
javascript - 平滑 'turning'脚本
我正在使用 Javascript 制作 HTML5 Canvas 游戏。我想让一个物体平滑地转向某个方向。我将方向存储为变量，并使用弧度。代码的工作原理如下: window.setInterval
javascript - 平滑/采样算法对于简单列表有一个错误
我正在尝试平滑数字列表，出于绘图目的，我不想绘制超过 5000 个项目的图表，因为渲染时间太长，而且我们不需要额外的数据。假设我们有一个简单的列表: let v = [1,2,3]; // max
jQuery animate() 平滑
我正在尝试制作一款倒置飞扬的小鸟游戏，但我面临一个大问题。我尝试从上到下生成管道障碍物，但动画看起来很像文本编辑器，而且不流畅，所以我该如何平滑它？我尝试使用 requestanimationfra
python - 不均匀采样角度值的二维插值/平滑
我有一些数据由不均匀采样的 2D 空间位置组成，其中每个 x, y 坐标都有一个介于 0 和 2pi 之间的相关相位值 theta。我希望能够将 theta 值插入到常规 x, y 网格中。在相同(或
3D矩阵/直方图的openCV高斯模糊/平滑
我有一个(3D)直方图，我喜欢对其应用高斯平滑: cv::MatND Hist; 在 1D 和 2D 情况下，我通过以下方式对其进行模糊处理: cv::GaussianBlur(Hist, Hist,
平滑 alpha 交叉淡入淡出的算法？
我的应用程序通过调整其 alpha 值在各种媒体和文本层之间淡入淡出。然而，当使用线性交叉淡入淡出时，亮度似乎在中途“下降”，然后又淡出。经过一番搜索，我找到了 this answer这解释了这个问题
android拖动 View 平滑
我必须在屏幕上拖动一些 View 。我正在通过触摸监听器的 ACTION_MOVE 上的运动事件更改其布局参数的左侧和顶部来修改它们的位置。有没有办法让“拖动”元素更顺畅？因为这种“拖拽”一点也不顺畅
image-processing - 图像处理 - 平滑
我只想问有没有你推荐的资源描述Image smoothing简单地。谢谢。最佳答案就像一些评论者提到的那样，图像平滑可能意味着很多事情。但主要是，当有人使用这个术语时，他们的意思是模糊或低通滤波
javascript - 平滑 React 组件中的视差
我有一个带有简单视差的 React 组件，可以更改顶部和不透明度值。问题是滚动动画有点不稳定。有什么办法可以平滑过渡吗？我在 vanilla JS 中使用 requestAnimationFrame(
fonts - libGDX 平滑 FreeTypeFonts
我在使用 libGDX 获得平滑字体时遇到问题。我已经在这个网站上搜索，并在谷歌上，我尝试了这些问题的解决方案here和 here ，但我的字体渲染效果总是很差。示例: 我尝试了多种方法，总是得到与
gnuplot - 平滑 Gnuplot 中的轮廓图？
我正在尝试为 Himmelblau's function 绘制一个简单的等高线图(在 gnuplot 中)使用以下代码: f(x,y)=(((x**2)+(y)-11)**2)+(((x)+(y**2
java - 平滑 Swing 动画
我想知道如何平滑 JScrollPane 的自动过渡。我正在使用 JScrollBar scroll = scollpane.getVerticalScrollBar(); scroll.setVal
python - 如何在healpix贴图上有效地执行顶帽(类似圆盘)平滑？
我有一个高分辨率的healpix贴图(nside = 4096)，我想在给定半径(假设为10 arcmin)的圆盘中对其进行平滑处理。对healpy非常陌生，在阅读了文档后，我发现一种不太好的方法是
jquery - 平滑 anchor 链接滚动冲突
我使用下面的代码在 anchor 链接上平滑滚动 jQuery(function() { jQuery('a[href*=#]:not([href=#])').click(function() {
c# - 平滑 Rx Observable
与这个问题非常相似:Rx IObservable buffering to smooth out bursts of events ，我有兴趣消除可能突然发生的可观察量。希望下图说明我的目标: Ra
javascript - 如何使连续动画附加到悬停按钮内的 svg 平滑？
我正在开发代码战链接(一个 div)。我希望 div 内的 svg 在悬停时连续旋转。产生的悬停效果远非平滑，当鼠标在其上滚动时 svg 会跳跃。 mouseout 事件被注释掉了，因为它值得。优化这
java - 平滑 BufferImage 边缘
有没有办法平滑转换(平移和旋转)的 BufferedImage 的锯齿状边缘？测试图像的放大 View : (请注意，这不是将要使用的实际 BufferedImage，仅用于此处演示)。已使用双线
java - 圆有边缘而不是使用 libgdx 平滑
为什么这没有产生平滑的圆？有什么想法吗？ public void draw(ShapeRenderer sRenderer) { sRenderer.begin(ShapeType.Fille
ios - 平滑 ImageView 中的曲线和文本
我正在做一个项目，我的 ImageView 包含文本和曲线。当在计算机上查看图形时，它们看起来很好。如果带有 ImageView 的应用程序加载到 iPad 2 上，文本(字体:helvetica n

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - 如何以平滑过渡而不是笨重的方式向图像添加类