Display an element that has been tucked away, and then bring it to life

Is there a way to implement an animation that causes the hidden form to slide from right to left after the .button class is hidden? I have been able to achieve similar effects individually, but struggle with synchronizing their animations.
When the button is clicked, it moves to the right by a few pixels before disappearing, and ideally, I would like the form to animate simultaneously.

How can I replicate the effect as if the form were contained within the .button class and emerged from that space?

Any assistance on this matter would be greatly appreciated!

Please refer to this fiddle for reference: fiddle link

jqueryhtmlcss

Answer №1

  $('a.button').on('click', function() {
    $(this).toggleClass('hidden-btn');
    $('.myform').fadeIn('slow');
    $('.myform input').focus();
  });
.wrapper {
  overflow: hidden;
  height: 200px;
}
.button {
    font-size: 18px;
    background-color: lightblue;
    width: 222px;
    text-align: center;
    height: 44px;
    line-height: 40px;
    text-transform: uppercase;
    display: inline-block;
    font-weight: 700;
    margin-top: 100px;
    left: 50%;
    transform: translateX(-50%);
    position: relative;
    transition: all 0.4s
}
.hidden-btn {
  left: 200%;
}
.myform {
    float: left;
    position: relative;
    margin-top: 100px;
    display: none;
    left: 50%;
    top: -145px;
    transform: translateX(-50%);
}
.myform input {
    float: left;
    width: 284px;
    height: 40px;
    padding-left: 63px;
    padding-right: 5px;
    margin-top: 1px;
    border: none;
    color: #767676;
    font-size: 13px;
    background-color: lightgrey;
}
.myform button {
     width: 170px;
    height: 44px;
    border: 0;
    text-transform: uppercase;
    color: #fff;
    font-size: 16px;
    background-color: lightblue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
  <a href="#" class="button">Click Here</a>
  <form class="myform" action="">
    <input type="text" placeholder="Email Address">
    <button type="submit">Submit</button>
  </form>
</div>

Answer №2

Check out this interactive demo with new updates. In this demonstration, we incorporated the use of CSS3 animations.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Looking for assistance in designing a responsive web page with CSS, specifically in determining the optimal page width

Currently, I am working on making my web page responsive for four different screen sizes (320px, 640px, 980px, and 1024px). Everything looks great and adapts well when I resize the site up to 1024px. However, once the size goes beyond that, I want to preve ...

htmlcssresponsive-designviewport

Invoke the onload event from document.ready using jQuery

Is it possible to trigger the onload event from within jQuery's document.ready function, such as in the example below: $(function() { onloadfunc(param); }); Comparison: <body onload = "onloadfunc(param);"> Do the above two methods achieve th ...

javascriptjquery

Error message: ngRepeat does not allow duplicate elements in an array

Upon review, I discovered this particular piece of code: <!DOCTYPE html> <html> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script> <body> <script> var app = angular.module("myS ...

javascripthtmlangularjsarraysangularjs-ng-repeat

Laravel and jQuery: A Perfect Match for Routing

Using Ajax to fetch and display content in a Laravel view, I am trying to figure out how to access the second parameter from the URL. Currently, it is returning a random string: for(var i=0;i<array.length;i++){ html+="<a href={{ route('show ...

phpjqueryajaxlaravel

Trouble selecting options in hierarchical data

I've been attempting to run this sample code for selecting an option from a select element with hierarchical data, but it seems to be having some issues. $scope.options = [ { id: 1, info: { label: "Item 1" } }, { id: 2, info: { label: ...

javascripthtmlangularjs

Tips for organizing the data you have collected from the table

After successfully printing all the data from my database, I am facing a challenge in designing my data effectively. The table I am working with is called post_tbl and it has columns named post_id, post_message, and post_date. This is the query I am usin ...

phphtmlcss

Encountering error callback in AJAX when executing MySQL update query using PHP

As someone who is just starting out with PHP and backend web development, please excuse me if I make any silly mistakes. My current project involves uploading an image using PHP, utilizing jQuery and AJAX to trigger the PHP function, and then storing the ...

phpjquerymysqlajax

Ways to access nested div children without using identifiers

To customize the width of a specific div using jQuery, I need to target the following structure in my HTML code. Although parts of it are generated by a lightbox plugin, the part that sets it apart is the unique class "xxxgallery": <div class="xxxgalle ...

jqueryhtmlcss

Presentation with multi-directional animations

Curious to know if it's possible to create a unique slideshow that scrolls in multiple directions? The concept is to display various projects when scrolling up and down, and different images within each project when scrolling left and right. Is this i ...

javascripthtmlcsssliderslideshow

The moment I attempted to send a POST method through AJAX, I encountered a 404 error. This issue occurred despite using both

I am working with Spring MVC and attempting to integrate jQuery into my project. The following code snippet is part of my web page setup: $(document).ready(function () { var entity = {mag: "status_key", paper: "View10"}; $("#btn").click(function ( ...

javajqueryajaxspringhttp

Surprising CSS overflow error

Recently, I've encountered a CSS overflow issue while working on a responsive webpage. The problem seems to be stemming from the navigation menu. The declaration of "overflow-x: hidden" is specifically causing the trouble... Initially, I suspected i ...

cssmobileoverflowresponsive

Present the received JSON objects in a visually pleasing manner

Is there a way to present JSON objects retrieved from my server more visually on my webpage rather than just using an alert? success: function (data, textStatus, jqXHR) { alert(data.details + '\nHello ' + data.client ...

jqueryjson

What is the best way to incorporate a button that, when clicked, reveals two separate images on the frontend?

describe food option heredescribe juice option hereHow can I create a button using HTML, CSS, JavaScript, and Bootstrap that displays different images for food and juices when clicked? For example, clicking on "food" will display 3 different food images, w ...

javascripthtmlcssbootstrap-4bootstrap-5

What is the best way to enhance the capabilities of a current tinyMCE button?

I am interested in enhancing the capabilities of the default buttons in tinyMCE by adding additional functionality. I'm curious to know how this can be achieved. For instance, If I would like the paste button not only to paste content, but also perf ...

javascriptjquerytinymce

Is it possible to utilize a contenteditable div in place of a textarea?

Is it possible to replace a textarea with a content editable div? Will the behavior be the same? Can data processing be done in the same way as with textarea data? ...

jquerycsshtml

Challenges in Converting HTML String into a jQuery Object and Navigating It

I have created a small script that takes an autoresponder code from a textarea for email marketing. When the textarea loses focus, it should parse the pasted code, extract certain attributes and elements, and place them in separate input fields. However, ...

jqueryhtmlformshtml-parsing

Is there a way to add zebra striping to a gridview that is already using jquery tablesorter?

I have a GridView in my asp.net application that utilizes the tablesorter plugin: $(document).ready(function() { $("[id$='_myGridView']").tablesorter({ sortList: [[0, 0]] }); }); Is there a way to implement zebra striping that updates ...

asp.netjquerygridviewtablesorterzebra-striping

Guide on adding CSS3 ribbons to elements on both sides

I recently came across a tutorial that teaches how to create a CSS ribbon. However, after following the tutorial, I found that the ribbon only appears on one side of the element. This has left me wondering if it's possible to have the ribbon display o ...

css

JavaScript can be utilized to manage the exit events

Possible Duplicate: Alert when browser window closed accidentally Is there a way to trigger a new window to open when a user clicks the exit button (X) on the browser, similar to how the Wordpress Admin Panel functions? In the Wordpress panel, when t ...

javascriptjqueryevents

Tips for ensuring an image fits perfectly within a MUI grid

I am currently working on an application that involves a collection of cards. My tech stack includes React and MUI v5. One issue I've been facing is with the grid layout, specifically in trying to keep the image size consistent within the grid item. ...

cssreactjsimagematerial-ui