2011-01-22 65 views
0

我在這裏有一個非常標準的問題。jquery:顯示/隱藏div,計時

我有一個錯誤的div,

當按下一個按鈕被填充有一個錯誤信息, 在div然後淡入,後(500 * N)。MS(其中n =字母數) div被淡出。

當div在淡出之前再次按下按鈕時,會發生我的問題。

而股利仍是可見的內容與新的錯誤信息更新的div,

初始(500 * N)毫秒的div淡出後,緊接着就被褪回,是可見另一個(500 * n)ms。

我想要的是。

  • 用戶點擊按鈕
  • 格內容更新
  • 格在
  • 用戶褪色點擊按鈕再次
  • DIV立即淡出
  • 內容更新
  • 格在褪色。

我該如何做到這一點?

我當前的代碼是低於

function login_error(message){ 
     $('form').effect('shake', { times: 1 }, 50); 
     $('#error').html(message).fadeIn('fast').delay(500*message.length).fadeOut('fast'); 
} 

回答

1

simething like this?

$(function() { 
    var counter = 0; 
    var timeOut; 
    $('button').click(function() { 
     showdiv('clicked ' + counter++); 
    }); 

    function showdiv(str) { 
     clearTimeout(timeOut); 
     $('div').fadeOut(function() { 
      $(this).html(str).fadeIn(function() { 
       timeOut = setTimeout(function() { 
        $('div').fadeOut(); 
       }, 100 * str.length); 
      }); 
     }) 
    } 
}); 

演示: http://www.jsfiddle.net/N88gv/

0

或許,如果你停止動畫和重置DIV

  $('#error').stop().hide().html(message).fadeIn('fast').delay(500*message.length).fadeOut('fast'); 
0

另一種解決辦法是點擊該按鈕後,您可以禁用它,並與格完成/動畫完成後,您可以啓用它。