Creating a dynamic search bar animation using jQuery's animate function

Check out the live demo

I'm working on animating a search form. Currently, it slides from left to right, but I want it to slide from right to left instead. Additionally, I would like to add a smooth easing effect to the animation.

Here is the HTML code I am using: 

<form role="form" class="search-form-2">
    <i class="fa fa-search"></i>
    <div class="search-toggle" style="display:none">
        <input type="text" class="search-form" autocomplete="off" placeholder="Search" size="25">
    </div>
</form>

And here is the JS code implementation: 

$("i.fa.fa-search").click(function () {
    $(".search-toggle").animate({width: 'toggle'});;
});

If anyone has any suggestions or tips on how to achieve this effect, it would be greatly appreciated.

javascriptjqueryhtmlcssanimation

Answer №1

Embed your .search-toggle within a div labeled with id="container". Apply the CSS property float: right to .search-toggle, and watch as your search box smoothly slides from right to left.

View the demonstration on Fiddle

HTML:

<form role="form" class="search-form-2"> <i class="fa fa-search"></i>
  <div id="container">
    <div class="search-toggle" style="display:none">
      <input type="text" class="search-form" autocomplete="off" placeholder="Search" size="25" />
    </div>
  </div>
</form>

CSS:

i.fa {
    cursor: pointer;
    position: relative;
    left: 300px;
    top: 30px;
    z-index: 10000;
    opacity: 0.8;
}
input.search-form {
    padding: 10px;
}
#container {
    width: 300px;
}
.search-toggle {
    float: right;
}

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

Exploring the Uses of SystemJS with TypeScript Loader

Can someone help clarify something about this TypeScript plugin for SystemJS? https://github.com/frankwallis/plugin-typescript/ Here is what the plugin does: This SystemJS plugin allows you to import TypeScript files directly and have them compiled in ...

javascripttypescriptsystemjs

Setting up AngularJS Modules

Seeking guidance on a recommended approach. I have a module where I am configuring some custom headers. It's a simple task: $httpProvider.defaults.headers.common['token'] = function() { return token; }; The token is a value that n ...

javascriptangularjsmodule

The Art of Checkbox Design

Seeking help in replacing the default check mark on a checkbox with an image. Here is the code snippet I am currently using: <html> <head> <style> .bl { background:-webkit-gradient(linear, left top, left bottom, color-stop(0, #175899), c ...

javascripthtmlcss

Are there any plugins available that can assist me in validating models directly on the client side?

I am in search for a solution to validate forms on the client-side. Is there a Rails plugin that can assist me with this task? Possibly one that generates the necessary JavaScript code for validating models based on ActiveRecord validations? ...

javascriptruby-on-railsvalidationclient-side

A Guide to Identifying and Emphasizing Duplicate Rows in Ag-Grid Using react

I'm attempting to use ag-grid in order to identify duplicate rows by comparing the id, name, and description fields. values = [ { id: 10, name: 'axel', desc: 'it's me' }, { id: 10, name: 'axel', desc: &ap ...

javascriptreactjsjsonduplicatesag-grid

Guidelines for Inputting Passwords in Bootstrap 4 Modal Windows

$(window).on('load',function(){ $('#loginModal').modal('show'); }); $(document).ready(function(e) { $('#loginModal').on('hidden.bs.modal', function(e) { window.location.href = '../index. ...

javascripthtmlbootstrap-4

Using JavaScript and HTML to retrieve information from JSON files in an application

Looking to incorporate i18n into my HTML and JavaScript application, with PHP as the backend. I have a JSON file containing all the keys and translations. Due to limitations on reading JSON files from local storage, I'm unsure of where to store these ...

javascripthtmljsoninternationalizationxampp

Navigating through the concept of passing objects by reference in child components of Angular 2+

Understanding that TypeScript uses object passing by reference can be challenging, especially when dealing with deep copy issues. This becomes particularly cumbersome when working within a theme. I recently encountered an issue with a component containing ...

javascriptangulartypescript

Issue with Zebra_Calendar and JSON compatibility in Internet Explorer 7

I have integrated the Zebra_Calendar jQuery plugin on my website, but encountered an issue when including a JSON implementation. Specifically, I am facing an "Object Doesn't Support This Property or Method" error related to string.split during initial ...

javascriptjqueryjsonplugins

Struggling to bypass server side rendering in Next.js and display dynamic component exclusively on the client side

In my pursuit to dynamically render a customized react component that includes react-owl-carousel within a next js application, I encountered a challenge. As I discovered, the react-owl-carousel component is not compatible with server-side rendering. To w ...

javascriptreactjsnext.js

Why is it that the HttpClient constructor in Angular doesn't require parameters when instantiated through the constructor of another class, but does when instantiated via the 'new' keyword?

I am trying to create a static method for instantiating an object of a class, but I have encountered a problem. import { HttpClient } from '@angular/common/http'; export MyClass { // Case 1 public static init(): MyClass { return this(new ...

javascriptangulartypescript

The Google API is experiencing issues when using input that has been added on

Situation: In my attempt to integrate a Google address search feature into an online shopping website, I encountered a challenge. I don't have direct access to the website's HTML code, but I can insert code snippets in the header, footer, and in ...

javascripthtmlgoogle-mapsgoogle-api

Retrieve Object3D in three.js based on a custom property value

In my coding project, I have been creating instances of LineSegments in the following manner: const geometry = new THREE.BufferGeometry(); geometry.setAttribute('position', new THREE.BufferAttribute(vertices, 3)); const edges = new THREE.EdgesGe ...

javascriptthree.js

Is there a way to implement a confirmation form within the properties_list view to ensure the user intends to delete the property

Is there a way to modify the code below so that instead of directly deleting the property, a confirmation form (such as a modal) is displayed for the user to decide whether to proceed with the deletion or not? views.py def property_list(request): proper ...

javascriptpythonhtmlcssdjango

How can you access the name of an array form using event.target?

I have a few checkboxes with the name checkBoxName[]. How can I retrieve the values from them? I am trying to submit them using Fetch in my handleSubmit function but encountering issues. <div> <input type='checkbox' name='ch ...

javascriptarraysreactjspost

Transition the object in smoothly after the slide has changed

How can I make the h4 tags fade in after the divs slide into view, while also adding the class "current" to each visible slide? Check out the example on JSFiddle here. <div class="slider"> <div class="slides"> <div class="slide ...

javascriptjquerycss

Tips on displaying a successful message and automatically refreshing the page simultaneously

I am working on a JSP Servlet code that utilizes AJAX to handle user data. In the success function of AJAX, I aim to display a success message to the user and clear all fields in the form by reloading the page. Unfortunately, when the page reloads, the a ...

jqueryhtmlajax

Can text be inserted into an SWF file using ASP.NET or Javascript via an online platform?

I am managing a website that features videos created by a graphic designer who updates and adds new content regularly. I am looking to add dynamic text to these videos after a specific amount of time, such as "Hosted by XXX". However, I am hesitant to ask ...

javascriptasp.netflashedit

Incorrect Results from Angular Code Coverage

Currently using Angular.js, Karma, Karma-coverage (Istanbul), and Jasmine for my stack. While conducting Code Coverage analysis on my app, I encountered an issue which leads to my question - Service A is showing up as covered by tests (in green) even thou ...

javascriptangularjsjasmineistanbulkarma-coverage

When the update button is clicked, the textfield is hidden; it reappears upon refreshing the page

Our marketplace multi-vendor site on Magento allows sellers to list their products for sale. The frontend displays the price using the following code: Phtml <input onFocus="showPriceCancel('<?php echo $products->getId(); ?>');" clas ...

javascriptphpcssmagento