包括文本幻灯片之间的淡入淡出

Question

我正在尝试制作它，以便在这些文字幻灯片之间进行淡入淡出过渡，而不仅仅是箭头键。我非常感谢任何帮助。

该页面的链接是http://shahrukhkhanstuff.com/zentests/reachoutproject/index.php

这是我正在使用的javascript：

    $(document.documentElement).keyup(function (e) {
    var $activeslide = $('.slides.active');
    if (e.keyCode == 39) {
        if ($activeslide.next('.slides').length) {
            $targetslide = $activeslide.next('.slides');
        }
        else {}
    }
    if (e.keyCode == 37) {
        if ($activeslide.prev('.slides').length) {
            $targetslide = $activeslide.prev('.slides');
        }
        else {}
    }
    $targetslide.addClass('active');
    $activeslide.removeClass('active');
});

Answer 1

不确定使用滑动，但这里有一个CSS解决方案，可以用来淡入淡出。

.slides {
    opacity: 0;
    transition: 1s;
    position: absolute;
}

.slides.active {
    opacity: 1;
}