如何在切換課程時讓div緩慢移動？

Question

$(document).ready(function(){ 
 
    $("#toggle-btn").click(function(){ 
 
    $(".book").toggleClass("with-summary",1000); 
 
    }); 
 
});

.book { 
 
    height:500px; 
 
    width:100%; 
 
    position: relative; 
 
    border:1px solid red; 
 
} 
 

 
.book-summary { 
 
    position: absolute; 
 
    left:-250px; 
 
    top:0px; 
 
    width:250px; 
 
    height:100%; 
 
    border:5px solid green; 
 
    overflow-y: auto; 
 
} 
 

 
.book-body { 
 
    position: absolute; 
 
    right:0px; 
 
    top:0px; 
 
    left:0px; 
 
    height:100%; 
 
    border: 5px solid black; 
 
    overflow-y: auto; 
 
} 
 

 

 
#toggle-btn:hover { 
 
    cursor: pointer; 
 
} 
 

 

 

 
.book.with-summary .book-summary { 
 
    left:0px; 
 
} 
 

 
.book.with-summary .book-body { 
 
    left:250px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div class="book"> 
 
    <div class="book-summary"></div> 
 
    <div class="book-body"> 
 
    <button id="toggle-btn"> click me</button> 
 
    </div> 
 
</div> <!-- book end -->

我在添加代碼 「1000」，但仍DIV下滑如此之快。 如何在切換課程時使div緩慢移動？

Answer 1

好的，當你給100%即使CSS轉換不起作用。所以，你需要給出一個固定值，你可以使用transition：

* {font-family: 'Segoe UI';} 
 

 
.show-hide {overflow: hidden; height: 100px; -webkit-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease;} 
 
.show-hide.show {height: 500px;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<a href="#" onclick="$('#show-hide').toggleClass('show'); return false;">Show/Hide</a> 
 
<div class="show-hide" id="show-hide"> 
 
    <p>Microsoft Corporation /ˈmaɪkrɵsɒːft/ (commonly referred to as Microsoft) is an American multinational technology company headquartered in Redmond, Washington, that develops, manufactures, licenses, supports and sells computer software, consumer electronics and personal computers and services. Its best known software products are the Microsoft Windows line of operating systems, Microsoft Office office suite, and Internet Explorer web browser. Its flagship hardware products are the Xbox game consoles and the Microsoft Surface tablet lineup. It is the world's largest software maker measured by revenues. It is also one of the world's most valuable companies.</p> 
 
    <p>Microsoft was founded by Bill Gates and Paul Allen on April 4, 1975, to develop and sell BASIC interpreters for Altair 8800. It rose to dominate the personal computer operating system market with MS-DOS in the mid-1980s, followed by Microsoft Windows. The company's 1986 initial public offering, and subsequent rise in its share price, created three billionaires and an estimated 12,000 millionaires from Microsoft employees. Since the 1990s, it has increasingly diversified from the operating system market and has made a number of corporate acquisitions. In May 2011, Microsoft acquired Skype Technologies for $8.5 billion in its largest acquisition to date.</p> 
 
    <p>As of 2015, Microsoft is market dominant in both the IBM PC-compatible operating system (while it lost the majority of the overall operating system market to Android) and office software suite markets (the latter with Microsoft Office). The company also produces a wide range of other software for desktops and servers, and is active in areas including Internet search (with Bing), the video game industry (with the Xbox, Xbox 360 and Xbox One consoles), the digital services market (through MSN), and mobile phones (via the operating systems of Nokia's former phones and Windows Phone OS). In June 2012, Microsoft entered the personal computer production market for the first time, with the launch of the Microsoft Surface, a line of tablet computers.</p> 
 
    <p>With the acquisition of Nokia's devices and services division to form Microsoft Mobile Oy, the company re-entered the smartphone hardware market, after its previous attempt, Microsoft Kin, which resulted from their acquisition of Danger Inc.</p> 
 
    <p>Microsoft is a portmanteau of the words microcomputer and software.</p> 
 
</div>

注：百分比不，當你正在轉換或動畫工作。請嘗試賦予值。

$(document).ready(function(){ 
 
    $("#toggle-btn").click(function(){ 
 
    $(".book").toggleClass("with-summary"); 
 
    }); 
 
});

* { 
 
    transition: all 0.5s; 
 
} 
 

 
.book { 
 
    height:500px; 
 
    width:100%; 
 
    position: relative; 
 
    border:1px solid red; 
 
} 
 

 
.book-summary { 
 
    position: absolute; 
 
    left:-250px; 
 
    top:0px; 
 
    width:250px; 
 
    height:100%; 
 
    border:5px solid green; 
 
    overflow-y: auto; 
 
} 
 

 
.book-body { 
 
    position: absolute; 
 
    right:0px; 
 
    top:0px; 
 
    left:0px; 
 
    height:100%; 
 
    border: 5px solid black; 
 
    overflow-y: auto; 
 
} 
 

 

 
#toggle-btn:hover { 
 
    cursor: pointer; 
 
} 
 

 

 

 
.book.with-summary .book-summary { 
 
    left:0px; 
 
} 
 

 
.book.with-summary .book-body { 
 
    left:250px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div class="book"> 
 
    <div class="book-summary"></div> 
 
    <div class="book-body"> 
 
    <button id="toggle-btn"> click me</button> 
 
    </div> 
 
</div> <!-- book end -->

Answer 2

您可以使用CSS轉換：

JS

$(document).ready(function(){ 
    $("#toggle-btn").click(function(){ 
    $(".book").toggleClass("with-summary"); 
    }); 
}); 

CSS

.book { 
    height:500px; 
    width:100%; 
    position: relative; 
    border:1px solid red; 
} 

.book-summary { 
    position: absolute; 
    left:-250px; 
    top:0px; 
    width:250px; 
    height:100%; 
    border:5px solid green; 
    overflow-y: auto; 
} 

.book-body { 
    position: absolute; 
    right:0px; 
    top:0px; 
    left:0px; 
    height:100%; 
    border: 5px solid black; 
    overflow-y: auto; 
} 


#toggle-btn:hover { 
    cursor: pointer; 
} 



.book.with-summary .book-summary { 
    -webkit-transition: all 1s ease; 
    -moz-transition: all 1s ease; 
    -o-transition: all 1s ease; 
    -ms-transition: all 1s ease; 
    transition: all 1s ease; 
    left:0px;  
} 

.book.with-summary .book-body { 
    -webkit-transition: all 1s ease; 
    -moz-transition: all 1s ease; 
    -o-transition: all 1s ease; 
    -ms-transition: all 1s ease; 
    transition: all 1s ease; 
    left:250px; 
}