JQuery Простой Переключение не работает

Вот код:JQuery Простой Переключение не работает

<html> 
    <head> 
     <script src="http://code.jquery.com/jquery.min.js"></script> 
     <script> 
      function showSuccess() { 
       $('#successDiv > p').empty().append("Saving the Device Whitelist was a success.<br />Server Resonse: Sucess"); 
       $('#successDiv').toggle().delay(4000).toggle(); 
      } 

      $(function() { 
       $('#successDiv').on('click', function() { 
        showSuccess(); 
       }) 
      }); 
     </script> 
    </head> 
    <body> 
     <div id="successDiv" style="display:none"> 
      <p>Hello</p> 
     </div> 

     <input type="button" id="showSuccess" value="Show Success" /> 
    </body> 
</html>

По какой-то причине переключатель не работает ...

Вот jsfiddle

источник

2013-07-16 Callum Linington

Что такое ожидаемое поведение? – Adam

Div предназначен для отображения на 4 секунды, а затем уходит –

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

function showSuccess() { 
    $('#successDiv > p').empty().append("Saving the Device Whitelist was a success.<br />Server Resonse: Sucess"); 
    $('#successDiv').toggle(100).delay(4000).toggle(100); 
} 

$(function() { 
    $('#showSuccess').on('click', showSuccess); 
});

Fiddle

Upd: проблема с таймингами ограничение JQuery:

Только последующие события в очереди задерживаются ; например, это будет , не задерживая формы без аргументов .show() или .hide(), которые не используют , используют очередь эффектов.

(Из delaydocumentation)

источник

2013-07-16 10:02:52 Tommi

Да, спасибо за это, есть ли причина, чтобы установить время переключения при цепочке? –

Это требование jQuery:> Задерживаются только последующие события в очереди; например, это не задерживает формы без аргументов .show() или .hide(), которые не используют очередь эффектов. (Получил это [здесь] (http://api.jquery.com/delay/)). Я добавляю эту заметку, чтобы ответить будущим посетителям. – Tommi

Большое спасибо за вашу помощь !!! –

$('#successDiv').on('click', function() {

должен быть

$('#showSuccess').on('click', function() {

$('#successDiv').toggle().delay(4000).toggle();

должен быть

$('#successDiv').show(0).delay(4000).hide(0);

здесь скрипку http://jsfiddle.net/L35rW/

источник

2013-07-16 09:58:22

все еще не работает –

исправлено. извините –

Вот рабочий пример: http://jsfiddle.net/js3E6/1/

$(function() { 
    $('#showSuccess').on('click', function() { 

     $('#successDiv > p').html("Saving the Device Whitelist was a success.<br />Server Resonse: Sucess"); 
     $('#successDiv').slideDown().delay(4000).slideUp(); 
    }); 
});

источник

2013-07-16 10:00:37 sdespont

если вы удалите последнюю часть delay(4000).toggle(); она работает. http://jsfiddle.net/582Z3/

$('#successDiv').toggle();

Зачем вам задержка?

Btw также измените идентификатор в событии click на $('#showSuccess').

источник

2013-07-16 10:02:11

JQuery Простой Переключение не работает

ответ

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