javascript - 阻止区域并且不允许鼠标影响它

标签 javascript jquery jquery-events

我希望迷宫不会让用户在悲伤的笑脸出现后从随机位置开始,有什么建议吗?

这是 fiddle 链接:http://jsfiddle.net/uqcLn/59/

$(".way").bind('mouseenter', function () {
    $('#highlight_lose').fadeIn(1000);
    $('.wall').css("background", '#fff');
    $(".arrow").html("Try again");

    $('.arrow').bind().addClass('gradient');
    $('.arrow').bind().html('Try again!').css('color', '#000');


    function move() {
        console.log("t");
        $(".arrow").animate({
            "margin-left": "-=10px"
        }, 300, function () {
            $(".arrow").animate({
                "margin-left": "+=10px"
            }, 300, function () {
                $(".arrow").removeAttr('style');
                move();

            });
        });
    }
    $(".arrow").removeAttr('style');
    $(".arrow").clearQueue().stop().finish();
    move();
})

最佳答案

CBRoe 的回答是正确的。我正在玩你的 jsfiddle,我更新了它。检查这是否有帮助

http://jsfiddle.net/neogauravsvnit/uqcLn/60/

我只是稍微修改了一下js部分

$(".wall").hover(function () {
    //$(this).css("background", '#000');
    if($("#wall_first").hasClass("wall-black") || $(this).attr("id") == "wall_first"){
        $(this).addClass("wall-black");
    }
    $('#highlight_lose').fadeOut(1000);
    $(".arrow").removeAttr('style');
    $(".arrow").clearQueue().stop().finish();
    $ (".arrow"). html ("START HERE!");
})


$(".way").bind('mouseenter', function () {
    $('#highlight_lose').fadeIn(1000);
    //$('.wall').css("background", '#fff');
    $(".wall").removeClass("wall-black");
    $(".arrow").html("Try again");

    $('.arrow').bind().addClass('gradient');
    $('.arrow').bind().html('Try again!').css('color', '#000');





    function move() {
        console.log("t");
        $(".arrow").animate({
            "margin-left": "-=10px"
        }, 300, function () {
            $(".arrow").animate({
                "margin-left": "+=10px"
            }, 300, function () {
                $(".arrow").removeAttr('style');
                move();

            });
        });
    }
    $(".arrow").removeAttr('style');
    $(".arrow").clearQueue().stop().finish();
    move();
})

我在第一个类型 wall 中添加了一个 id 元素。我定义了 wall-black 类,以便您可以有效地检查第一个框是否已悬停在上面。

关于javascript - 阻止区域并且不允许鼠标影响它,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19270525/

相关文章:

javascript - 导入支持其他 javascript 函数的 HTML 部分

javascript - 如何以百分比形式显示 HTML 表格数据

javascript - 获取对象的任意属性

javascript - CKEditor 文本区域内容不显示/不可更新(随机)

javascript - 在 jQuery 中使用 switch 语句

javascript - Twitter bootstrap typeahead 无法添加到动态创建的元素

javascript - 如何从数组中的数组中获取项目

jquery - 奇怪的 IE8 布局故障 - 为什么正文背景消失了?

jquery - jQueryCycle 可以一次显示多个图像,但一次滑动一张吗?

javascript - 对象文字和事件监听器,最佳实践?