Question

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

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();或slideDown();，但是它不起作用。

编辑：

在此图像中，您可以看到效果。图标如何从白色背景（绿色叶子）变为绿色背景（白色叶子）： https://prnt.sc/lgwr3f

使用jQuery创建上下滑动或推入效果

0 个答案: