Необъявленные переменные в функции обратного вызова

Мне тяжело обволакивать мозг вокруг этого.Необъявленные переменные в функции обратного вызова

У меня есть функция mouseover, которая устанавливает две переменные в текущие свойства margin-top и margin-left css, а затем выполняет анимацию. На отведении указателя мыши, я хотел бы напомнить как эти эти две переменные, но я постоянно получаю «переменная неопределенные» ошибка ...

$("#featInstructors li a").mouseover(function() { 
    var mTop = $(this).find("img.instructor").css("margin-top"); 
    var mLeft = $(this).find("img.instructor").css("margin-left"); 
    $(this) 
    .find("img.instructor") 
    .animate({ 
     width: "115px", 
     height: "115px", 
     top: "50%", 
     left: "50%", 
     marginTop: "-57.5px", 
     marginLeft: "-57.5px"}, 200); 
    }) 
    .mouseout(function() { 
     $(this) 
     .find("img.instructor") 
     .animate({ 
      width: "200px", 
      height: "200px", 
      top: "0", 
      left: "0", 
      marginTop: mTop, 
      marginLeft: mLeft 
     }, 200); 
    }); 
});

Что я здесь отсутствует?

источник

2014-10-09 Murphy1976

Вы получаете ошибку «переменная не определена» при наведении указателя мыши или мыши? –

@ Dan O, я получаю undefined на mouseout. – Murphy1976

@Colin DeClue, нет, это правильно. Я хочу, чтобы marginTop и marginLeft этого изображения были возвращены к оригиналу. – Murphy1976

var mTop; 
var mLeft; 

$("#featInstructors li a").mouseover(function() { 
    mTop = $(this).find("img.instructor").css("margin-top"); 
    mLeft = $(this).find("img.instructor").css("margin-left"); 
$(this) 
.find("img.instructor") 
.animate({ 
    width: "115px", 
    height: "115px", 
    top: "50%", 
    left: "50%", 
    marginTop: "-57.5px", 
    marginLeft: "-57.5px"}, 200); 
}) 
.mouseout(function() { 
    $(this) 
    .find("img.instructor") 
    .animate({ 
     width: "200px", 
     height: "200px", 
     top: "0", 
     left: "0", 
     marginTop: mTop, 
     marginLeft: mLeft 
    }, 200); 
}); 
});

DonT пытался, но, вероятно, эта работа

или это

.mouseout(function(a,b) { 
    $(this) 
    .find("img.instructor") 
    .animate({ 
     width: "200px", 
     height: "200px", 
     top: "0", 
     left: "0", 
     marginTop: a,// mTop 
     marginLeft: b//mLeft 
    }, 200); 
});

источник

2014-10-09 15:15:58

размещение переменных ВНЕ всей функции выполнило трюк. Спасибо. – Murphy1976

Просто примечание. Вы можете написать функцию в одной строке var mTop, mLeft; Также он просто избил меня в ответе, просто сделал скрипку http://jsfiddle.net/83sp523h/ :) –

Также вы можете добавить stop() перед анимацией, чтобы предотвратить пузыриться :) –

Ваш отступы неправильно. Когда я запустил свой код через jsbeauifier.org это приводит к следующим образом:

$("#featInstructors li a").mouseover(function() { 
     var mTop = $(this).find("img.instructor").css("margin-top"); 
     var mLeft = $(this).find("img.instructor").css("margin-left"); 
     $(this) 
      .find("img.instructor") 
      .animate({ 
       width: "115px", 
       height: "115px", 
       top: "50%", 
       left: "50%", 
       marginTop: "-57.5px", 
       marginLeft: "-57.5px" 
      }, 200); 
    }) 
    .mouseout(function() { 
     $(this) 
      .find("img.instructor") 
      .animate({ 
       width: "200px", 
       height: "200px", 
       top: "0", 
       left: "0", 
       marginTop: mTop, 
       marginLeft: mLeft 
      }, 200); 
    }); 
});

Вы можете увидеть, что проблема становится очевидной. Переменные объявляются внутри обратного вызова mouseover. Вам необходимо объявить его первым за пределами обеих функций:

var mTop, mLeft; 

$("#featInstructors li a").mouseover(function() { 
...

источник

2014-10-09 15:17:58 parchment

'this' не имеет такого же значения вне функции, как и внутри функции. Это не сработает. –

@ColinDeClue Я обновил ответ, хотя я вижу, что Profeta добрался до него первым. Подумайте, мой ответ - дополнение к их. – parchment

Необъявленные переменные в функции обратного вызова

ответ

Смежные вопросы