2011-05-30 165 views
0

任何人都可以幫助我解決這個問題,我錯過了什麼?簡單的jQuery動畫不工作

<script type="text/javascript"> 

    $('#loginButton').click(function() { 
    $('#toplogin').animate({ 
     height: '0px' 
    }); 
    }); 
</script> 

onClick甚至不執行!

我想onClick事件工作,對DIV是在這裏:

<div id="loginButton"><a href="#" title="login">Login &raquo;</a></div> 

我希望動畫影響的div是在這裏:

div id="toplogin"> <!-- more stuff --> </div> 
+0

你並不需要,經過分號物體內部的高度線。否則看起來沒問題,你確定'.click()'被解僱嗎?你肯定有這些ID的元素?有CSS導致問題? – Orbling 2011-05-30 05:00:22

回答

0

試試這個:

$('#loginButton').click(function() { 
    $('#toplogin').animate({ 
     height: 0 
    }, 
    function() { 
     $(this).css('display', 'none'); 
    }); 
}); 
+0

@ user775736我測試過,代碼不工作。這可能工作。我也使用css將'height:0px'設置爲'div',並且它不隱藏內容。爲什麼這我不知道。如果有人有任何建議,請分享。 – thecodeparadox 2011-05-30 05:22:35

3

height: '0px'後刪除分號,使您的JavaScript有效。

<script type="text/javascript"> 
    $('#loginButton').click(function() { 
    $('#toplogin').animate({ height:'0px' }); 
    }); 
</script> 

但是,除非你有#toploginoverflow:hidden集的元素將仍然是可見的,即使它的高度0px。更簡單的方法是使用slideUp()

<script type="text/javascript"> 
    $('#loginButton').click(function(){ $('#toplogin').slideUp(); }); 
</script> 
+0

nope,沒有工作 – user775736 2011-05-30 05:02:07

+0

這應該工作......它不工作,只有從css你隱藏的元素。 – 2011-05-30 05:13:14

+0

@ user775736:添加額外的信息來回答它似乎不起作用的原因。 – Marcel 2011-05-30 05:56:53

0

你應該換在下面的結構,使之有效,jQuery代碼代碼:

$(document).ready(function(){ 
    your code; 
})