почему jquery .bind () не работает?

Question

почему jquery .bind () не работает?

0

Я сделал команду unbind для #hotspot. При сжатии divs, называемых #hotspot и #center, я не могу снова привязать 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 не работает?

Ultraga 12 май 2014, в 13:36

Источник

1

вам нужно передать функцию-обработчик в вызов bind()
Arun P Johny 12 май 2014, в 11:24
0

@ArunPJohny прав, проверьте документацию здесь
Daniel Hernández Alcojor 12 май 2014, в 11:27

Теги:

jquery

bind

3 ответа

1

Не используйте jQuery bind - он устарел.

Используйте .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!');
  }
);

martynas 12 май 2014, в 09:26

0

Я думаю, что вы пропустили функцию обратного вызова для этого события

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

Balachandran 12 май 2014, в 09:34

0

извините но что значит callbackFunction?
Ultraga 12 май 2014, в 11:28
0

@ user3628198 callbackFunction выполняется, когда происходит событие
martynas 12 май 2014, в 11:29
0

как бы это выглядело ...
Ultraga 12 май 2014, в 11:29

Показать ещё 1 комментарий

Ещё вопросы

вам нужно передать функцию-обработчик в вызов bind()
@ArunPJohny прав, проверьте документацию здесь
@ user3628198 callbackFunction выполняется, когда происходит событие

Arun P Johny · Accepted Answer · 2014-05-12T09-33-00.000Z

Вам нужно передать функцию обработчика привязке события, например

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

Thankssssss, это работает, теперь я понимаю это лучше, потрясающе!
Я приму ваш ответ, спасибо всем, это был мой первый пост здесь, и я получил ответ менее чем за 3 минуты, awesomeeeee, если у кого-то есть идея получше, просто опубликуйте его здесь :)