2010-12-10 2 views
0

Мое намерение - скрыть элемент div, как только нажата кнопка hide. Но браузер молчал, когда я нажал кнопку скрыть.Анимация в jquery not firing

Вот мой код

 
$.fn.slideFadeToggle = function(easing, callback) { 
     return this.animate({ opacity: 'toggle', height: 'toggle' }, "slow", easing, callback); 
    }; 

    $("#hid").click(function(){ 
     alert('here'); 
     $("#result").slideFadeToggle(); 
    }); 

скрыли идентификатор кнопки, которая на самом деле щелкнул должен скрыть DIV. Предупреждение внутри функции щелчка не работает.

результатом является идентификатор div, который должен быть скрыт. есть идеи?

+0

работает нормально? http://www.jsfiddle.net/4yUqL/19/ – jAndy 2010-12-10 13:16:31

+0

здесь не работает. Я включил библиотеки jquery. i dunt hav является ключом к ошибкам в этом коде – CHID 2010-12-10 13:18:11

ответ

2

Предупреждение внутри функции щелчка не работает.

Это говорит о том, что в то время, вы делаете свой $("#hid").click(..., элемент с ID hid пока не существует в DOM. Вы не можете получить доступ к элементам DOM до их создания.

Три способа, чтобы убедиться, что они были созданы, прежде чем пытаться получить доступ к ним должны использовать функцию JQuery ready, чтобы просто убедиться, что ваш код сценария загружается после элемент в вопросе, или использовать JQuery-х live особенность.

Так, например, это будет терпеть неудачу:

<html> 
... 
<script type='text/javascript' src='jquery.js'></script> 
<script type='text/javascript'> 
    $("#hid").click(...); 
</script> 
</head> 
<body> 
<div id='hid'>...</div> 
... 

Но это будет работать (через ярлык для ready):

<html> 
... 
<script type='text/javascript' src='jquery.js'></script> 
<script type='text/javascript'> 
    jQuery(function($) { 
     $("#hid").click(...); 
    }); 
</script> 
</head> 
<body> 
<div id='hid'>...</div> 
... 

Как это будет (потому что сценарий находится после элемент в разметке):

<html> 
... 
<script type='text/javascript' src='jquery.js'></script> 
</head> 
<body> 
<div id='hid'>...</div> 
<script type='text/javascript'> 
    $("#hid").click(...); 
</script> 
... 

... это последнее, что команда Google за Closurerecommend; аналогично, YUI team recommend, ставя ваши скрипты непосредственно перед вашим закрывающим тегом body, который приходит к тому же.

И это будет работать (через live):

<html> 
... 
<script type='text/javascript' src='jquery.js'></script> 
<script type='text/javascript'> 
    $("#hid").live('click', ...); 
</script> 
</head> 
<body> 
<div id='hid'>...</div> 
... 
0

Ну, это работает для меня в хроме: jsfiddle

ли импортировать вы JQuery до этого кода?

+0

Да, я включил библиотеку jquery из google api – CHID 2010-12-10 13:18:30