Установка свойств jquery.animate CSS для значений, хранящихся в элементе DOM, с использованием $ (this) .data - PullRequest
Новая
       279

Установка свойств jquery.animate CSS для значений, хранящихся в элементе DOM, с использованием $ (this) .data

4 голосов
/ 19 сентября 2011 
#me {
    background-color: blue;
    color: white;
    width:150px;
    padding: 5px;
    position: relative;
}

<div id='me'>Here we go</div>

ОК, я пытаюсь установить свойства CSS метода $ .animate для значений, хранящихся в элементе DOM, с помощью метода $ .data. Теперь это работает 

$('#me').data().moveto = 50;
$('#me').animate({ left: '+=' + $('#me').data('moveto') }, 2000, function() {
    $(this).text('Finished: '+$(this).data('moveto'));
});

Но это не 

$('#me').data().moveto = 50;
$('#me').animate({ left: '+=' + $(this).data('moveto') }, 2000, function() {
    $(this).text('Finished: '+$(this).data('moveto'));
});

Ничего не происходит. Теперь этот второй метод не должен работать?

И в обоих случаях это распознается, и текст устанавливается на Завершено: 50.

Приветствие.

1 Ответ

1 голос
/ 19 сентября 2011

Здесь: 

$('div').animate({ left: '+=' + $(this).data('moveto') }, 2000);

this будет таким же this, что и вне вызова функции, что эквивалентно этому: 

var self = this;
$('div').animate({ left: '+=' + $(self).data('moveto') }, 2000);

и self вероятно не тот <div>, который вы ищете, поэтому $(this).data('moveto') возвращает undefined, и вы заканчиваете пытаться сделать: 

$('div').animate({ left: '+=' }, 2000);

, который не делает ничего полезного. Попробуйте этот пример, и вы должны увидеть, что происходит:

http://jsfiddle.net/ambiguous/NXDKB/

Кроме того, вам, вероятно, лучше делать: 

$('#me').data('moveto', 50);

вместо: 

$('#me').data().moveto = 50;

Как вы обнаружили в документации (спасибо за внимание к этому BTW), $x.data() вернет объект данных, но может случиться интересное, если $x соответствует более чем одному элементу DOM.

...