徽标之间的平滑过渡

Question

我有一个粘性标题，我添加了自定义代码，以便在您开始向下滚动页面时更改图像徽标。我希望徽标从一个平滑过渡到另一个但我没有运气。这是我正在使用的代码。

# gdb --batch --eval-command="thread apply all bt full" /usr/bin/mysqld 61
[New LWP 62]
[New LWP 63]
[New LWP 64]
[New LWP 65]
[New LWP 66]
[New LWP 67]
[New LWP 68]
[New LWP 69]
[New LWP 70]
[New LWP 71]
[New LWP 72]
[New LWP 73]
[New LWP 76]
[New LWP 92]
0x00007fc86ec6af33 in __clone () from /lib/ld-musl-x86_64.so.1

Thread 15 (LWP 92):
#0  0x00007fc86ec6af33 in __clone () from /lib/ld-musl-x86_64.so.1
No symbol table info available.
#1  0x00007fc86ec68663 in ?? () from /lib/ld-musl-x86_64.so.1
No symbol table info available.
#2  0x00007fc817d53b30 in ?? ()
No symbol table info available.
#3  0x0000000000000000 in ?? ()
No symbol table info available.

Thread 14 (LWP 76):
#0  0x00007fc86ec6af33 in __clone () from /lib/ld-musl-x86_64.so.1
No symbol table info available.
#1  0x00007fc86ec68663 in ?? () from /lib/ld-musl-x86_64.so.1
No symbol table info available.
#2  0x00007fc816fd4b30 in ?? ()
No symbol table info available.
#3  0x0000000000000000 in ?? ()
No symbol table info available.

Thread 13 (LWP 73):
#0  0x00007fc86ec6af33 in __clone () from /lib/ld-musl-x86_64.so.1
No symbol table info available.
#1  0x00007fc86ec68663 in ?? () from /lib/ld-musl-x86_64.so.1
No symbol table info available.
#2  0x00007fc817019b30 in ?? ()
No symbol table info available.
#3  0x0000000000000000 in ?? ()
No symbol table info available.

Thread 12 (LWP 72):
#0  0x00007fc86ea15585 in ?? () from /usr/lib/libaio.so.1
No symbol table info available.
#1  0x000055e3f43759c1 in ?? ()
No symbol table info available.
#2  0x000055e3f4375f12 in ?? ()
No symbol table info available.
#3  0x000055e3f4377831 in ?? ()
No symbol table info available.
#4  0x000055e3f450ca5a in ?? ()
No symbol table info available.
#5  0x000055e3f440f9a8 in ?? ()
No symbol table info available.
#6  0x00007fc86ec68ff8 in ?? () from /lib/ld-musl-x86_64.so.1
No symbol table info available.
#7  0x0000000000000000 in ?? ()
No symbol table info available.

Thread 11 (LWP 71):
#0  0x00007fc86ea15585 in ?? () from /usr/lib/libaio.so.1
No symbol table info available.
#1  0x000055e3f43759c1 in ?? ()
No symbol table info available.
#2  0x000055e3f4375f12 in ?? ()
No symbol table info available.
#3  0x000055e3f4377831 in ?? ()
No symbol table info available.
#4  0x000055e3f450ca5a in ?? ()
No symbol table info available.
#5  0x000055e3f440f9a8 in ?? ()
No symbol table info available.
#6  0x00007fc86ec68ff8 in ?? () from /lib/ld-musl-x86_64.so.1
No symbol table info available.
#7  0x0000000000000000 in ?? ()
No symbol table info available.

Thread 10 (LWP 70):
#0  0x00007fc86ea15585 in ?? () from /usr/lib/libaio.so.1
No symbol table info available.
#1  0x000055e3f43759c1 in ?? ()
No symbol table info available.
#2  0x000055e3f4375f12 in ?? ()
No symbol table info available.
#3  0x000055e3f4377831 in ?? ()
No symbol table info available.
#4  0x000055e3f450ca5a in ?? ()
No symbol table info available.
#5  0x000055e3f440f9a8 in ?? ()
No symbol table info available.
#6  0x00007fc86ec68ff8 in ?? () from /lib/ld-musl-x86_64.so.1
No symbol table info available.
#7  0x0000000000000000 in ?? ()
No symbol table info available.

Thread 9 (LWP 69):
#0  0x00007fc86ea15585 in ?? () from /usr/lib/libaio.so.1
No symbol table info available.
#1  0x000055e3f43759c1 in ?? ()
No symbol table info available.
#2  0x000055e3f4375f12 in ?? ()
No symbol table info available.
#3  0x000055e3f4377831 in ?? ()
No symbol table info available.
#4  0x000055e3f450ca5a in ?? ()
No symbol table info available.
#5  0x000055e3f440f9a8 in ?? ()
No symbol table info available.
#6  0x00007fc86ec68ff8 in ?? () from /lib/ld-musl-x86_64.so.1
No symbol table info available.
#7  0x0000000000000000 in ?? ()
No symbol table info available.

Thread 8 (LWP 68):
#0  0x00007fc86ea15585 in ?? () from /usr/lib/libaio.so.1
No symbol table info available.
#1  0x000055e3f43759c1 in ?? ()
No symbol table info available.
#2  0x000055e3f4375f12 in ?? ()
No symbol table info available.
#3  0x000055e3f4377831 in ?? ()
No symbol table info available.
#4  0x000055e3f450ca5a in ?? ()
No symbol table info available.
#5  0x000055e3f440f9a8 in ?? ()
No symbol table info available.
#6  0x00007fc86ec68ff8 in ?? () from /lib/ld-musl-x86_64.so.1
No symbol table info available.
#7  0x0000000000000000 in ?? ()
No symbol table info available.

Thread 7 (LWP 67):
#0  0x00007fc86ea15585 in ?? () from /usr/lib/libaio.so.1
No symbol table info available.
#1  0x000055e3f43759c1 in ?? ()
No symbol table info available.
#2  0x000055e3f4375f12 in ?? ()
No symbol table info available.
#3  0x000055e3f4377831 in ?? ()
No symbol table info available.
#4  0x000055e3f450ca5a in ?? ()
No symbol table info available.
#5  0x000055e3f440f9a8 in ?? ()
No symbol table info available.
#6  0x00007fc86ec68ff8 in ?? () from /lib/ld-musl-x86_64.so.1
No symbol table info available.
#7  0x0000000000000000 in ?? ()
No symbol table info available.

Thread 6 (LWP 66):
#0  0x00007fc86ea15585 in ?? () from /usr/lib/libaio.so.1
No symbol table info available.
#1  0x000055e3f43759c1 in ?? ()
No symbol table info available.
#2  0x000055e3f4375f12 in ?? ()
No symbol table info available.
#3  0x000055e3f4377831 in ?? ()
No symbol table info available.
#4  0x000055e3f450ca5a in ?? ()
No symbol table info available.
#5  0x000055e3f440f9a8 in ?? ()
No symbol table info available.
#6  0x00007fc86ec68ff8 in ?? () from /lib/ld-musl-x86_64.so.1
No symbol table info available.
#7  0x0000000000000000 in ?? ()
No symbol table info available.

Thread 5 (LWP 65):
#0  0x00007fc86ea15585 in ?? () from /usr/lib/libaio.so.1
No symbol table info available.
#1  0x000055e3f43759c1 in ?? ()
No symbol table info available.
#2  0x000055e3f4375f12 in ?? ()
No symbol table info available.
#3  0x000055e3f4377831 in ?? ()
No symbol table info available.
#4  0x000055e3f450ca5a in ?? ()
No symbol table info available.
#5  0x000055e3f440f9a8 in ?? ()
No symbol table info available.
#6  0x00007fc86ec68ff8 in ?? () from /lib/ld-musl-x86_64.so.1
No symbol table info available.
#7  0x0000000000000000 in ?? ()
No symbol table info available.

Thread 4 (LWP 64):
#0  0x00007fc86ea15585 in ?? () from /usr/lib/libaio.so.1
No symbol table info available.
#1  0x000055e3f43759c1 in ?? ()
No symbol table info available.
#2  0x000055e3f4375f12 in ?? ()
No symbol table info available.
#3  0x000055e3f4377831 in ?? ()
No symbol table info available.
#4  0x000055e3f450ca5a in ?? ()
No symbol table info available.
#5  0x000055e3f440f9a8 in ?? ()
No symbol table info available.
#6  0x00007fc86ec68ff8 in ?? () from /lib/ld-musl-x86_64.so.1
No symbol table info available.
#7  0x0000000000000000 in ?? ()
No symbol table info available.

Thread 3 (LWP 63):
#0  0x00007fc86ea15585 in ?? () from /usr/lib/libaio.so.1
No symbol table info available.
#1  0x000055e3f43759c1 in ?? ()
No symbol table info available.
#2  0x000055e3f4375f12 in ?? ()
No symbol table info available.
#3  0x000055e3f4377831 in ?? ()
No symbol table info available.
#4  0x000055e3f450ca5a in ?? ()
No symbol table info available.
#5  0x000055e3f440f9a8 in ?? ()
No symbol table info available.
#6  0x00007fc86ec68ff8 in ?? () from /lib/ld-musl-x86_64.so.1
No symbol table info available.
#7  0x0000000000000000 in ?? ()
No symbol table info available.

Thread 2 (LWP 62):
#0  0x00007fc86ec6af33 in __clone () from /lib/ld-musl-x86_64.so.1
No symbol table info available.
#1  0x00007fc86ec68663 in ?? () from /lib/ld-musl-x86_64.so.1
No symbol table info available.
#2  0x00007fc86ee9db30 in ?? ()
No symbol table info available.
#3  0x0000000000000000 in ?? ()
No symbol table info available.

Thread 1 (LWP 61):
#0  0x00007fc86ec6af33 in __clone () from /lib/ld-musl-x86_64.so.1
No symbol table info available.
#1  0x00007fc86ec68663 in ?? () from /lib/ld-musl-x86_64.so.1
No symbol table info available.
#2  0x00007fc86eea2bd0 in ?? () from /lib/ld-musl-x86_64.so.1
No symbol table info available.
#3  0x0000000000000000 in ?? ()
No symbol table info available.

Answer 1

＆＃13;

＆＃13;

$("img").on("click", function() {
  $('.one').css("opacity") == 1 ? $('.one').css("opacity", 0) : $('.one').css("opacity", 1);
  $('.two').css("opacity") == 0 ? $('.two').css("opacity", 1) : $('.two').css("opacity", 0);
});

＆＃13;

img {
  position: absolute;
  transition: opacity .5s ease-in;
}

img + img { opacity: 0; }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img src="http://www.fillmurray.com/400/300" class="one" alt="Fill Murray">
<img src="http://www.placecage.com/400/300" class="two" alt="Place Cage">

＆＃13;

＆＃13;

＆＃13;

以下是您可以做的一个例子＆＃34;褪色＆＃34;效果，现在更改触发器以在滚动时执行相同操作。 不要忘记带img {transition: opacity .5s ease-in;}的CSS，这是你的＃34;顺畅＆＃34;转型！

这是你在找什么？

Answer 2

首先在图像元素上执行淡出（或隐藏/隐藏元素的其他功能）效果。由于该元素已经可见，因此fadein无法做任何事情。您只是在更改属性。

jQuery(function($) {
    $(window).scroll(function() {
        if(window.scrollY === 0) {
            $('.x-navbar .x-brand img').attr('src', 'http://test.unknowndesign.co.za/wp-content/uploads/2018/02/UNKNOWN.svg');
        }  
        else
        {
             $('.x-navbar  .x-brand img').fadeOut(200).attr('src', 'http://test.unknowndesign.co.za/wp-content/uploads/2018/02/U.svg').fadeIn(200);
        }
    })
});