Animating borders with jQuery

Attempting to add animation to a button click using borders and jQuery animate function.

jQuery( '#sendForm' ).hover( function (){
    jQuery( this ).animate({
        borderTopWidth: "5px",
        borderBottomWidth: "0px"
    }, 'fast' );
}, function (){
    jQuery( this ).animate({
        borderTopWidth: "0px",
        borderBottomWidth: "5px"
    }, 'fast' );
});

Encountering an issue where only the bottom border animates, not the top.

Update

.submitButton { 
    padding: 10px; 
    border: 0px; 
    border-bottom: 5px solid #1B5A81; 
    background-color: #267DAD; 
    color: white; 
    font-weight: bold; 
}
jquerycss

Answer №1

To achieve the same effect, you can also utilize CSS3 transitions. Check out this Demo

Here is the HTML code:

<button>BlahBlah</button>

And here is the corresponding CSS code:


    button {
   border-top: 5px solid #ff0000;
   border-bottom: 0px solid #ff0000;
   transition: border-top 2s, border-bottom 2s;
   -moz-transition: border-top 2s, border-bottom 2s; /* Firefox 4 */
   -webkit-transition: border-top 2s, border-bottom 2s;; /* Safari and Chrome */
   -o-transition: border-top 2s, border-bottom 2s; /* Opera */
}

button:hover {
   border-top: 0px solid #ff0000;
   border-bottom: 5px solid #ff0000;
   transition: border-top 2s, border-bottom 2s;
   -moz-transition: border-top 2s, border-bottom 2s; /* Firefox 4 */
   -webkit-transition: border-top 2s, border-bottom 2s;; /* Safari and Chrome */
   -o-transition: border-top 2s, border-bottom 2s; /* Opera */
}

You can learn more about CSS3 transitions from this w3 link

Answer №2

Do you prefer it this way?

Check out the jsfiddle here

I made some adjustments to the CSS:

.submitButton { 
    padding: 10px; 
    border-bottom: 5px solid #1B5A81; 
    border-top: 0px solid #1B5A81; 
    background-color: #267DAD; 
    color: white; 
    font-weight: bold; 
}​

Answer №3

After some investigation, I finally pinpointed the issue. It turned out that specifying the border type and color in the CSS resolved the problem:

Updated CSS:

.submitButton
        {
            padding: 10px;
            border: 0px;
            border-top: 0px solid white;
            border-bottom: 5px solid #1B5A81;
            background-color: #267DAD;
            color: white;
            font-weight: bold;
        }

Appreciate all the assistance provided :)

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

Dynamically load highcharts with a dynamic configuration setting

I am currently utilizing highcharts and dynamically loading them using ng-repeat. <div ng-repeat="(key,value) in chartCheckboxes track by $index"> <div class="card" id="{{key}}"> <div class="card-body" id="{{key}}"> ...

javascriptjqueryangularjshighcharts

Utilize jQuery in conjunction with a Django REST API

I'm having a problem updating my data using ajax jquery. When I attempt to update the data using the api, everything works fine. However, when I try to use ajax put, the data doesn't get updated. $.ajax({ type: 'PUT', ...

jqueryajaxdjangodjango-rest-framework

Centering Text in CSS and HTML

Today I am pondering over how to align text horizontally on my website. The layout of us.mineplex.com's forums, shop, and title is perfectly aligned in a horizontal manner. I have tried to figure it out on my own but need some help. Thank you. CSS: ...

htmlcsstextalignment

How to customize the font size in three.js CSS3DRenderer

I am trying to use threejs's CSS3DRenderer to display text in my 3D view. However, I am facing issues with controlling the font size. Despite setting font-size: 1px in CSS, the text remains large. I also attempted to adjust the scale of the css3dobjec ...

javascriptcssthree.js

Trouble with fetching data for Line Chart via jQuery AJAX and ASP.NET MVC

I am working on incorporating a simple line chart from Google Charts into my project, but I am facing an issue with the data not loading correctly. I only require two values to be displayed: the hours worked and the days of the particular month. While I ca ...

javascriptjqueryasp.netajaxasp.net-mvc

Unable to convert information into JSON format

In my PHP file, I created a JSON array like this: $array[1] = "string1"; $array[2] = "string2"; $array[3] = "string3"; echo json_encode($array); I want to assign each string to different ID tags in my HTML, but the following code didn't w ...

phpjqueryajaxjson

What is the method for altering font color in HTML?

Here is the section of my code that I am struggling with: <p style="font-family:'impact', color:red"> something </p> The issue I am facing is that I am unable to use both the color and the font propert ...

htmlcsscolorsfont-familyinline-styles

Tips for accurately validating a pop-up form

I'm having difficulties with getting validation to function properly on my bootstrap modal. I have tried various examples without success. How can I properly implement validation for a bootstrap modal? This is my HTML: <div class="modal fade" i ...

javascriptjquerytwitter-bootstraptwitter-bootstrap-3bootstrap-modal

Tally up the values of selected checkboxes

  I'm in search of a method to tally up data-values associated with checkboxes. In the example provided below, selecting locations from the checkboxes results in the calculation of primary values, which are displayed in the green box. I also need to ...

javascripthtmljquerycssfunction

Transferring data between droppable and draggable elements in JQueryUI

I have been developing a drag and drop control system using JQuerUI. The concept involves having draggable "controls" that can be added to a droppable "form" from a toolbox menu (also draggable). I have successfully implemented the code allowing me to drop ...

jqueryjquery-ui

What is the best way to clear and fill a div without causing it to resize?

I am faced with a challenge involving four thumbnail divs labeled .jobs within a #job-wrap container. When a .job is clicked, I want the #job-wrap to fade out, clear its contents, load information from the selected .job, and then fade back in. However, whe ...

javascriptjqueryhtmlcss

access the data in the fresh window.open

I created a brand new window var win = window.open("", "", "width=400, height=200"); and now I want to access its body using var $windowBody = $(win.document.body); and then use functions like .find() and .html() While this method works smoothly on Fi ...

javascriptjqueryinternet-explorer

The AJAX post method may be inconsistently triggered, with instances occurring both upon page loading and at other times

Recently, I've encountered a peculiar issue with AJAX. The problem arises when I attempt to return a map of objects using the AJAX POST method during page loading. While trying to debug the process, I've noticed that sometimes the method is call ...

javascriptjavajqueryajaxjsp

There was an issue when trying to process the Javascript data structure with JSON.parse

Currently, I have the following data stored in a JavaScript variable: "{'Headings': [{'name': 'Behavior', 'majorTopic': 'N', 'vote': {'down': 1, 'up': 1}}, {'na ...

javascriptjqueryjsondictionary

Retrieve the present time of an ongoing CSS3 animation

I've been trying to retrieve the current time of a running animation, but I haven't had any luck so far. I can easily grab the start time using: myelement.addEventListener('webkitAnimationStart', function (evt){ console.log(evt.elaps ...

javascriptcssanimationdom-events

Formatting an HTML table for mobile devices

Hi everyone, I'm struggling to understand why my table is displaying incorrectly when switching to the mobile version. I've attempted various CSS adjustments to correct it, but the issue persists when viewed on mobile devices. Mobile view of the ...

htmlcss

conceal elements created with JQuery within an AJAX function

Is it possible to use jQuery and the $.ajax() method to submit a form, displaying only the result while hiding other elements on the page? I am looking to add a conditional in the Ajax method that will show the result if successful, hiding certain elements ...

phpjqueryhtmlcssajax

Adjusting Font Size for Buttons on Mobile Devices in HTML

I am currently working on a website that I want to ensure is mobile-friendly. When testing it on my phone and in Chrome's device mode, I noticed that the majority of the text on the screen was displayed at an easily readable size without needing to zo ...

htmlcss

What is causing the col-auto with the red border to exceed its available height?

For this code, I've utilized version 5 of Bootstrap. In full screen width, the col-auto with the red border seems to be taking up more space than its content. The yellow border marks the available content space inside. I'm curious about what migh ...

htmlcssbootstrap-5

VueJS does not support loading Jquery

When setting up my project with Bootstrap, I encountered an issue where even though I imported the jquery.min file before Bootstrap in my main.js file using require(), Bootstrap still threw an error saying that it requires jQuery. In my main.js file, I ha ...

jquerytwitter-bootstrapvue.js