If语句基于可见性JS淡入淡出



如果淡入的元素已经是visibility="visible",我该如何更改它,这样就不会发生任何事情。它基本上是根据鼠标位置更改可见性,但现在每次鼠标移动时它都会淡入。演示:https://dl.dropboxusercontent.com/u/246684898/VipSitaraman.com/index2.htm.如果你觉得无聊,可以随意偷我的代码,因为编码很痛苦,我很乐意帮助别人。。。请相信我。

$(".txt").mousemove(function(e){
    var offset = $(this).offset();
    var a = e.clientX - offset.left;
    var b = e.clientY - offset.top;
    var c = 0
    if (a > 0 && a <= 750) {
        $('#s1').css('visibility','visible').hide().fadeIn();
            $('#s2,#s3,#s4,#s5,#s6').css('visibility','hidden');
            $('#home').text(c + ", "+ b);
        } else if (a > 750 && a <= 1500) {
            $('#s2').css('visibility','visible').hide().fadeIn();
            $('#s1,#s3,#s4,#s5,#s6').css('visibility','hidden');
        } else if (a > 1500 && a <= 2250) {
            $('#s3').css('visibility','visible').hide().fadeIn();
            $('#s1,#s2,#s4,#s5,#s6').css('visibility','hidden');
        } else if (a > 2250 && a <= 3000) {
            $('#s4').css('visibility','visible').hide().fadeIn();
            $('#s1,#s2,#s3,#s5,#s6').css('visibility','hidden');
        } else if (a > 3000 && a <= 3750) {
            $('#s5').css('visibility','visible').hide().fadeIn();
            $('#s1,#s2,#s3,#s4,#s6').css('visibility','hidden');
        } else if (a > 3750 && a <= 4500) {
            $('#s6').css('visibility','visible').hide().fadeIn();
            $('#s1,#s2,#s3,#s5,#s4').css('visibility','hidden');
        } else {
            $('#s1,#s2,#s3,#s5,#s4,#s6').css('visibility','hidden');
        }
});
});
</script>

尝试

var $ss = $('.s');
$(".txt").mousemove(function (e) {
    var offset = $(this).offset();
    var a = e.clientX - offset.left;
    var b = e.clientY - offset.top;
    var c = 0;
    var d = Math.ceil(a / 750);
    if (d > 0 && d <= $ss.length) {
        var $t = $ss.eq(d - 1);
        if (!$t.data('visible')) {
            $t.css('visibility', 'visible').hide().fadeIn().data('visible', true);
            $ss.not($t).css('visibility', 'hidden').data('visible', false);
            $('#home').text(c + ", " + b);
        }
    } else {
        $ss.css('visibility', 'hidden');
    }
});

演示:Fiddle

最新更新