时间戳

首页 > 解决方案 > 使用 jQuery 创建上/下滑动或推送效果

javascript - 使用 jQuery 创建上/下滑动或推送效果

问题描述

src当用户使用此 jQuery 代码滚动到页面的某个点时，我正在替换图像：

jQuery(function() {
    var sticky = jQuery(".sticky-icon-white");
    jQuery(window).scroll(function() {
        var scroll = jQuery(window).scrollTop();

        if (scroll >= 115) {
            jQuery("#sticky-icon").attr("src", "https://dummyimage.com/100x100/000/fff");

        } else {
            jQuery("#sticky-icon").attr("src", "https://via.placeholder.com/100/");
            sticky.removeClass('not-sticky-icon-white').addClass('sticky-icon-white');
        }

        if (scroll >= 300) {
            sticky.removeClass('sticky-icon-white').addClass('not-sticky-icon-white');
        } else {
            sticky.removeClass('not-sticky-icon-white').addClass('sticky-icon-white');
        }
    });
});

这是我的 HTML：

<div class="sticky-icon-white">
   <img id="sticky-icon" src="https://via.placeholder.com/100/">
</div>

替换工作正常，但我想在其上应用幻灯片或推送（不知道如何称呼它）动画。像这个：https ://gosimple.com （中间的叶子图标）。

但我不知道怎么做。有人可以帮我找到解决方案吗？

这是一个 JSFiddle：http: //jsfiddle.net/bzqad296/

提前致谢！

我尝试过slideUp();orslideDown();但它不起作用。

编辑：

在这张图片中，您可以看到效果。图标如何从白色背景、绿叶变为绿色背景、白叶： https ://prnt.sc/lgwr3f

标签： javascriptjqueryanimation

解决方案

推荐阅读