Question

当您将鼠标悬停在#one上时，#first会获得课程.hidden。我已经使用.hidden让我的脚本淡出transition:ease-in 0.3s;，但我无法让淡入效果工作。我尝试将transition:ease-in 0.3s;添加到#first，但这不起作用。

编辑小提琴https://jsfiddle.net/Lbvmgh21/我刚刚注意到，在启动脚本一次后（第一次悬停），任何后续悬停都会正常淡入淡出。

$("#one").on({
    mouseover: function () {
        timer = setTimeout(function () {
            $("#first").removeClass('hidden').css('opacity', '1');
        }, 0);
    },
    mouseout: function () {
        clearTimeout(timer);
        $("#first").css({
            'opacity': '0'
        }).addClass('hidden');
    }
});

Answer 1

您需要将不透明度样式放在类中隐藏＆＃39;在你的CSS中，从javascript中删除它...然后你的removeClass和addClass转换应该正常工作。此外，我个人认为不需要计时器。

$("#one").on({
    mouseover: function () {
        $("#first").removeClass('hidden');
    },
    mouseout: function () {
        $("#first").addClass('hidden');
    }
});

Answer 2

查看此演示。它运作正常吗？

demo

from_station_name       starttime          
    900 W Harrison          2014-07-01 00:00:00    0
                            2014-07-01 01:00:00    0
                            2014-07-01 02:00:00    0
                            2014-07-01 03:00:00    0
                            ...
                            2014-07-01 08:00:00    1
                            2014-07-01 09:00:00    0   
                            2014-07-01 10:00:00    1
                            2014-07-01 11:00:00    1
                            2014-07-01 12:00:00    1
                            2014-07-01 13:00:00    0
                            ...
                            2014-07-01 22:00:00    1
                            2014-07-01 23:00:00    0
                            2014-07-02 00:00:00    0

悬停时淡入/淡出

2 个答案: