Question

我为#hotspot做了一个unbind命令。缩小名为#hotspot和#center的div时，我无法再绑定mouseenter和mouseleave！

$(document).ready(function () {
    $("#hotspot")
    .stop(true, false)
    .mouseenter(function () {
        $("#hotspot, #center").css({ 'width': '60%', 'height': '90%', 'top': '5%', 'left': '20%' });
        $("#center").css({ 'box-shadow': '0 0 2vw white' });
        $(".slide, .rectangle-u, .rectangle-d, .tl-u, .tr-u, .tl-d, .tr-d").animate({ opacity: 0 }, 100)
    })
    .mouseleave(function () {
        $("#hotspot, #center").css({ 'width': '50%', 'height': '80%', 'top': '10%', 'left': '25%' });
        $("#center").css({ 'box-shadow': '0 0 1vw white' });
        $(".slide, .rectangle-u, .rectangle-d, .tl-u, .tr-u, .tl-d, .tr-d").animate({ opacity: 1 }, 300)
    })
    .click(function () {
        $("#hotspot").unbind('mouseenter mouseleave');
        $("#center, #hotspot").css({ 'height': '100%', 'width': '100%', 'top': '0', 'left': '0' });
        $("#hotspot").animate({ opacity: 0 }, 1000, function () {
            $("#hotspot, .slide, .rectangle-u, .rectangle-d, .tl-u, .tr-u, .tl-d, .tr-d ").hide();
            $(".ribbon").show();
            $(".ribbon").css({ opacity: 0.3 });
        })
    });
    $(".ribbon, .ribbon p")
    .stop(true, false)
    .mouseenter(function () {
        $(".ribbon").css({ opacity: 1 })
    })
    .mouseleave(function () {
        $(".ribbon").css({ opacity: 0.3 })
    })
    .click(function () {
        $(".ribbon").css({ opacity: 0 }).hide();
        $("#hotspot").show().animate({ opacity: 1 }, 100);
        setTimeout(function () {
            $("#hotspot, #center").css({ 'width': '50%', 'height': '80%', 'top': '10%', 'left': '25%' })
        }, 1000);
        setTimeout(function () {
            $(".slide, .rectangle-u, .rectangle-d, .tl-u, .tr-u, .tl-d, .tr-d ").fadeIn();
            **$("#hotspot").bind('mouseenter mouseleave');**
        }, 1500)
    });
});

有人可以告诉我为什么bind命令不起作用吗？

Answer 1

不要使用jQuery绑定 - 它已被弃用。

使用.hover()：

$( "#hotspot" ).hover(
  function() {
    // Put things you want to do when the mouse is over
    alert('hovering now');
  }, function() {
    // Put things you want to do when the mouse leaves
    alert('leaving the planet. sayonara!');
  }
);

Answer 2

您需要将处理函数传递给事件绑定，如

$(document).ready(function () {

    //create a named function instead of anonymous function as callback
    function hsmouseenter() {
        $("#hotspot, #center").css({
            'width': '60%',
            'height': '90%',
            'top': '5%',
            'left': '20%'
        });
        $("#center").css({
            'box-shadow': '0 0 2vw white'
        });
        $(".slide, .rectangle-u, .rectangle-d, .tl-u, .tr-u, .tl-d, .tr-d").animate({
            opacity: 0
        }, 100)
    }

    function hsmouseleave() {
        $("#hotspot, #center").css({
            'width': '50%',
            'height': '80%',
            'top': '10%',
            'left': '25%'
        });
        $("#center").css({
            'box-shadow': '0 0 1vw white'
        });
        $(".slide, .rectangle-u, .rectangle-d, .tl-u, .tr-u, .tl-d, .tr-d").animate({
            opacity: 1
        }, 300)
    }

    $("#hotspot")
    .stop(true, false)
    //use the named functions as the handlers
    .mouseenter(hsmouseenter)
    .mouseleave(hsmouseleave)
    .click(function () {
        $("#hotspot").unbind('mouseenter mouseleave');
        $("#center, #hotspot").css({
            'height': '100%',
            'width': '100%',
            'top': '0',
            'left': '0'
        });
        $("#hotspot").animate({
            opacity: 0
        }, 1000, function () {
            $("#hotspot, .slide, .rectangle-u, .rectangle-d, .tl-u, .tr-u, .tl-d, .tr-d ").hide();
            $(".ribbon").show();
            $(".ribbon").css({
                opacity: 0.3
            });
        })
    });
    $(".ribbon, .ribbon p")
    .stop(true, false)
    .mouseenter(function () {
        $(".ribbon").css({
            opacity: 1
        })
    })
    .mouseleave(function () {
        $(".ribbon").css({
            opacity: 0.3
        })
    })
    .click(function () {
        $(".ribbon").css({
            opacity: 0
        }).hide();
        $("#hotspot").show().animate({
            opacity: 1
        }, 100);
        setTimeout(function () {
            $("#hotspot, #center").css({
                'width': '50%',
                'height': '80%',
                'top': '10%',
                'left': '25%'
            })
        }, 1000);
        setTimeout(function () {
            $(".slide, .rectangle-u, .rectangle-d, .tl-u, .tr-u, .tl-d, .tr-d ").fadeIn();
            //pass the handler function to the bind
            $("#hotspot").mouseenter(hsmouseenter).mouseleave(hsmouseleave);
        }, 1500)
    });
});

Answer 3

我认为你错过了该事件的回叫功能

$("#hotspot").bind('mouseenter mouseleave',callbackFuction)

为什么jquery .bind（）不工作？

3 个答案: