why jquery .bind() is not working?

Question

I made a unbind command for #hotspot. When shrinking the divs called #hotspot and #center I cannot bind mouseenter and mouseleave again!

$(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)
    });
});

Can somebody tell me why the bind command is not working?

Answer 1

You need to pass the handler function to the event bind like

$(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 2

Don't use jQuery bind - it's been deprecated.

Use .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 3

I think you missed call back function for that event

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