如果声明基于可见性JS淡入

时间:2014-04-23 02:09:57

标签: javascript jquery html css

如何改变这一点,如果被淡入的元素已经是可见性='可见'则没有任何反应它基本上改变了基于鼠标位置的可见性,但是现在它在每次鼠标移动时都会消失。演示: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>

1 个答案:

答案 0 :(得分:0)

尝试

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