Ways to create a gradual movement for a div upon toggling a class

Question

Ways to create a gradual movement for a div upon toggling a class

$(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 -->

Although I specified "1000" in my code, the sliding of the div is still too fast. How can I make the div move slowly when toggling a class?

javascript jquery html css

Answer 1

Answer №1

When you provide 100%, CSS transitions will not function properly. It is recommended to use a fixed value and implement the transition property:

* {font-family: 'Roboto';}

.show-hide {overflow: hidden; height: 150px; -webkit-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out;}
.show-hide.show {height: 300px;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<a href="#" onclick="$('#show-hide').toggleClass('show'); return false;">Show / Hide</a>
<div class="show-hide" id="show-hide">
  <p>Apple Inc. is an American multinational technology company headquartered in Cupertino, California that designs, develops, and sells consumer electronics, computer software, and online services. The company's hardware products include the iPhone smartphone, the iPad tablet computer, the Mac personal computer, the iPod portable media player, the Apple Watch smartwatch, the Apple TV digital media player, and the HomePod smart speaker.</p>
  <p>Apple was founded by Steve Jobs, Steve Wozniak, and Ronald Wayne in April 1976 to develop and sell Wozniak's Apple I personal computer. It was incorporated as Apple Computer, Inc., in January 1977, and sales of its computers saw significant momentum and revenue growth for several years before going public in 1980.</p>
  <p>The company then went through periods of success and decline throughout the 1990s but transformed itself under the leadership of CEO Steve Jobs from around the turn of the century. Since then, Apple has become known for its innovation in design, especially with products like the iMac, iPod, iPhone, iPad, and MacBook. The launch of the iTunes Store in 2003 revolutionized the music industry, and the introduction of the App Store in 2008 created a new ecosystem where developers could distribute and monetize their apps.</p>
  <p>As of January 2022, Apple is one of the largest technology companies by revenue and market capitalization. It is also the world's largest technology company by total assets, and it has been ranked as the world's most valuable brand multiple times.</p>
  <p>Currently, Tim Cook serves as the CEO of Apple Inc., following Steve Jobs' passing in 2011.</p>
  <p>The company takes its name from the apple orchard belonging to co-founder Jobs.</p>
</div>

Note: Avoid using percentages in transitions or animations. Stick to fixed values for better results.

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

* {
  transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

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

.book-summary {
  position: absolute;
  left: -200px;
  top: 0px;
  width: 200px;
  height: 100%;
  border: 3px solid orange;
  overflow-y: auto;
}

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


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



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

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/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>  <!-- End of book -->

Answer 2

When you provide 100%, CSS transitions will not function properly. It is recommended to use a fixed value and implement the transition property:

* {font-family: 'Roboto';}

.show-hide {overflow: hidden; height: 150px; -webkit-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out;}
.show-hide.show {height: 300px;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<a href="#" onclick="$('#show-hide').toggleClass('show'); return false;">Show / Hide</a>
<div class="show-hide" id="show-hide">
  <p>Apple Inc. is an American multinational technology company headquartered in Cupertino, California that designs, develops, and sells consumer electronics, computer software, and online services. The company's hardware products include the iPhone smartphone, the iPad tablet computer, the Mac personal computer, the iPod portable media player, the Apple Watch smartwatch, the Apple TV digital media player, and the HomePod smart speaker.</p>
  <p>Apple was founded by Steve Jobs, Steve Wozniak, and Ronald Wayne in April 1976 to develop and sell Wozniak's Apple I personal computer. It was incorporated as Apple Computer, Inc., in January 1977, and sales of its computers saw significant momentum and revenue growth for several years before going public in 1980.</p>
  <p>The company then went through periods of success and decline throughout the 1990s but transformed itself under the leadership of CEO Steve Jobs from around the turn of the century. Since then, Apple has become known for its innovation in design, especially with products like the iMac, iPod, iPhone, iPad, and MacBook. The launch of the iTunes Store in 2003 revolutionized the music industry, and the introduction of the App Store in 2008 created a new ecosystem where developers could distribute and monetize their apps.</p>
  <p>As of January 2022, Apple is one of the largest technology companies by revenue and market capitalization. It is also the world's largest technology company by total assets, and it has been ranked as the world's most valuable brand multiple times.</p>
  <p>Currently, Tim Cook serves as the CEO of Apple Inc., following Steve Jobs' passing in 2011.</p>
  <p>The company takes its name from the apple orchard belonging to co-founder Jobs.</p>
</div>

Note: Avoid using percentages in transitions or animations. Stick to fixed values for better results.

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

* {
  transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

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

.book-summary {
  position: absolute;
  left: -200px;
  top: 0px;
  width: 200px;
  height: 100%;
  border: 3px solid orange;
  overflow-y: auto;
}

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


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



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

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/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>  <!-- End of book -->

Answer 3

Answer №2

To implement a smooth transition effect in CSS, you can utilize the following code snippets:

JavaScript

$(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;
}

Answer 4

To implement a smooth transition effect in CSS, you can utilize the following code snippets:

JavaScript

$(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;
}

Ways to create a gradual movement for a div upon toggling a class

Answer №1

Answer №2

Similar questions

Ensuring a @keyframe animation remains constant for the entire duration of the user's visit to the webpage using CSS

inject custom styles into a Material-UI styled component

Rod running from one end to another within a receptacle

Unexplained quirks observed in AngularJS $watch during the initialization of a controller

Is it possible to stack images on top of each other on a webpage?

Client-side rendering for NextJS server components is also supported

Prevent a visitor from submitting the form again if it has already been submitted by the same visitor

Managing a webpage using Xcode and Swift's UIWebView

Display the component once the useEffect has been updated in React JS

Troubleshooting Ajax POST issues with Laravel

css code creates a stable block with a blurred transparent effect

Tips for enhancing the flexibility of the owl carousel

Is it possible for URLs in CSS Custom Properties to be relative to the CSS file where they are defined?

"Rest API is not activating JavaScript on Android devices, whereas it functions correctly in web browsers

Is it possible for me to send transactions asynchronously using polkadot-js?

Transforming a JSON into a JavaScript object using deserialization

A Comprehensive Guide to Handling Errors in Angular 4: Passing the err Object from Service to Component

Retrieve all items on the webpage using the pattern "_ followed by 10 random characters" through JavaScript

Is there a workaround in TypeScript to add extra details to a route?

Combining a standard JSS class with Material-UI's class overrides using the classnames library