Как включить / отключить функцию перемещения мышью при входе, оставляя содержащийся элемент (используя mouseenter и mouseleave) - PullRequest
Новая
       57

Как включить / отключить функцию перемещения мышью при входе, оставляя содержащийся элемент (используя mouseenter и mouseleave)

0 голосов
/ 07 сентября 2018

Так что сейчас я делаю функцию перемещения мышки, которая имеет div, следующий за моим курсором, когда я перемещаюсь по экрану.Я хочу сохранить этот элемент в блоке «заголовка», поэтому сейчас я просто отключаю его с помощью css и функции mouseleave всякий раз, когда мой курсор покидает элемент заголовка.

То, что я хочу сделать, это когда я ухожуэлемент заголовка, расположение div для сброса в исходное место после загрузки страницы.Вот фрагмент моего js, отредактированный для ясности: 

$( ".homehero" ).mouseleave(function() {
    // Not sure how to change this function here to turn off:
    /* $(document).mousemove(function(e) {
           $('.case-study #scene').offset({
               left: e.pageX + 70,
               top: e.pageY + 70
           });
        });  */
    $( "#scene" ).addClass( "hide-hero" ); // currently just hiding it 
});
$( ".homehero" ).mouseenter(function() {
    $(document).mousemove(function(e) {
        $('.case-study #scene').offset({
            left: e.pageX + 70,
            top: e.pageY + 70
        });
    });
    $( "#scene" ).removeClass( "hide-hero" ); // currently just showing it again on mouseenter
});

Обратите внимание, #scene - это div, который находится внутри элемента header .homehero.Ниже приведен скриншот того, что я сейчас делаю.

Screen capture of mousemove

Цените любые идеи!

Ответы [ 2 ]

0 голосов
/ 07 сентября 2018 
$('selector')
        .mouseleave(function() {
      $('targetSelector').animate({ 'margin-left': '0px' }, 250 );
    })
    .mouseenter(function() {
        $('targetSelector').animate({ 'margin-left': '150px' }, 
250 );
  });
0 голосов
/ 07 сентября 2018

Хотя вы можете использовать метод jQuery off(), который позволяет вам фактически удалить слушателя, вам нужно сохранить ссылку на эту функцию, чтобы off () удаляла только этого слушателя. В противном случае вам придется позвонить .off("mousemove"). При вызове без ссылки на функцию он удалит всех слушателей. Это может вызвать проблемы, если какой-то другой код должен добавить то же событие.

Вместо этого вы можете настроить перемещение мыши, как и другие. А затем используйте флаг, который вы установили в mouseenter и сбросили в mouseleave. Проверьте этот флаг в вашем обратном вызове mousemove, немедленно выйдя, если он будет проверен как false 

var enableMove = false;

$(document).mousemove(function(e) {
  if(!enableMove) return;

  $('.case-study #scene').offset({
    left: e.pageX + 70,
    top: e.pageY + 70
  });
});

$( ".homehero" ).mouseleave(function() {
  enableMove = false;
  $( "#scene" ).addClass( "hide-hero" );
});

$( ".homehero" ).mouseenter(function() {
  enableMove = false;
  $( "#scene" ).removeClass( "hide-hero" ); 
});

Что касается проблемы с позиционированием, вы можете просто сохранить координаты элемента при наведении мыши и использовать эти сохраненные данные для установки координат при выходе. Вы можете использовать метод jQuery data () , чтобы сохранить информацию о самом элементе и получить ее позже. 

//in mouseenter
var $element = $('.case-study #scene');
$element.data("originalCoordinates",$element.offset());

//in mouseleave
var $element = $('.case-study #scene');
$element.offset( $element.data("originalCoordinates") );
...