使DIV向上顯示onClick

Question

我發現了一個向上顯示DIV的主題，但由於我不是Javascript專家，我想知道如何使這項工作onClick而不是懸停？

萬一這會有所幫助，鏈接前面的話題是：How to make jQuery animate upwards

任何幫助表示讚賞。

Answer 1

下面是一個簡單demo

$("#slideToggle").click(function() { 
    $('.slideTogglebox').slideToggle(); 
}); 

$("#reset").click(function(){ 
    location.reload(); 
}); 

HTML：

<button id=slideToggle>slide</button> 
    <br/> 
    <div class="slideTogglebox"> 
     slideToggle() 
    </div> 

Answer 2

$(document).ready(function() { 
    var isClicked = false; //assuming its closed but its just logic 
    $('.button').click(function() { 
     if (isClicked) { 
      isClicked = true; 
      $(this).closest('div').animate({ 
      height: "150px", 
     }, 400, "swing"); 
     } 
     else 
     { 
      isClicked = false; 
      $(this).closest('div').animate({ 
       height: "50px", 
      }, 400, "swing"); 
     } 
    }); 
}); 

這是非常糟糕的做法。你應該考慮嘗試使用CSS3來代替，然後使用僅僅指剛jQueries toggleClass

.toggleClass('animateUpwards) 

讓瀏覽器使用的硬件能力，以動畫的所有的東西，也是其在JavaScript中一個不錯的一行。

Answer 3

嘗試jQuery slideUp或其他地方張貼jQuery slideToggle - 或者CSS3 Example

或從您發佈的問題，或許這就是你的意思：

http://jsbin.com/ogaje

點擊（可見部分） div

$(document).ready(function() { 
    $('.featureBox').toggle(function() { 
    $(this).animate({top: '-390px', height:'540px'},{duration:'slow', queue:'no'}); 
    // or $(this).slideUp() 
    }, 
    function() { 
    $(this).animate({top: '0px', height:'150px'},{duration:'slow', queue:'no'}); 
    // or $(this).slideDown() 
    }); 
}); 

點擊其他

$(document).ready(function() { 
    $("#button").toggle(function() { 
    $("#someDiv").animate({top: '-390px', height:'540px'},{duration:'slow', queue:'no'}); 
    // or $("#someDiv").slideUp() 
    }, 
    function() { 
    $("#someDiv").animate({top: '0px', height:'150px'},{duration:'slow', queue:'no'}); 
    // or $("#someDiv").slideDown() 
    }); 
});