The jQuery animate function fails to execute the specified animation (changing margin-left from -200 to +200)

I've been attempting to achieve a sliding effect for some text coming in from the left using .animate, but it's not working as expected.

Styling (CSS)

.body #header > a {
    font-family: Georgia, Courier, Verdana;
    font-size: 30px;
    padding: 24px;
    border-left: 3px solid red;
    margin-left: -200px;
        ...
}

Javascript (jQuery)

$("body").ready(function () {
  $('#header a').animate({"margin-left": '+=200'});

I'm also including the HTML snippet for linking the jQuery file I downloaded (it works with slide but only on normal .slide).

<script type='text/javascript' src='js\jquery-1.9.1.js'></script>
jqueryhtmlcss

Answer №1

There are three issues in your code:

  • The ready event should be bound to document, or use the $(function) syntax.
  • +=200 only animates from -200 to -200 + 200 = 0, consider using either 200 or +=400
  • The src attribute should be js/jquery-1.9.1.js - always use forward slashes in URIs

Updated code snippet:

$(function () {
    $('#header a').animate({"margin-left": '+=400'});
});

Answer №2

In my opinion, you should use $(document).ready instead of `$("body").ready.

Also, make sure the src is js/jquery-1.9.1.js and include the forward slash as per usual URL conventions.

Answer №3

Your CSS code needs some adjustments as there is no .body element present.

#header > a {
    font-family: Georgia, Courier, Verdana;
    font-size: 30px;
    padding: 24px;
    border-left: 3px solid red;
    margin-left: -200px;
}

Additionally, make sure to use $(document).ready instead of what you had.

Check out this link for more details

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

How can I make my opacity change on hover without the need for JavaScript?

I've been attempting to design a book cover that will become fully visible when hovered over, but for some reason it's not working #book_cover { display: block; margin-left: auto; margin-right: auto; width: 25%; height: 71%; ...

htmlcss

The appearance of my HTML is distinct on Chrome for Windows and Safari for OSX

I have designed a prototype of some HTML code, but my website appears differently on Safari compared to how it looks on Chrome. While it displays correctly on Chrome, on Safari (both on OSX and mobile phones) the alignment seems off and randomly centered i ...

htmlcssmacosgoogle-chromesafari

The mobile website always displays phone numbers in a crisp white color on the mobile

After creating a mobile version of my Wordpress website, especially for m.mysite.com, I noticed that while the mobile site displayed the correct color (#000) for the mobile number, the actual mobile device showed it in white. Here is the code I used: < ...

htmlcssmobilemobile-websitemobile-devices

Displaying various results using a range slider

I really need some assistance in making this range slider produce multiple outputs. I've attempted a few different options, but unfortunately, I haven't been able to figure it out. My goal is to have the text "590" display as 5.9 times the value ...

javascriptjqueryhtmlcss

Fetch external navigation and refresh hyperlinks

After spending an hour searching on Google without finding a solution to my problem, I decided to reach out here for help. Currently, I have a site hosted on a CMS platform and recently created a WordPress blog on a subdomain on a new server. Unfortunatel ...

phpjqueryajax

Using various HTML elements within Phonegap applications

Is it possible to include multiple HTML files in a Phonegap application? ...

iphonehtmlcordova

Node.js crashes when processing form submission using jQuery

Experiencing an issue where node.js hangs when submitting a form, but it still saves to mongodb. Seeking advice as I am new to node.js and not sure what I am doing wrong. index.js router.post('/add-to-cart/:id', cartController.checkCart, cartCo ...

jquerynode.jsmongodbexpress

Rails ajax is not providing the expected JSON format in the response

I've been experimenting with ajax to retrieve data from my controller. However, the json response I'm receiving is not what I expected. There might be a routing conflict causing this issue, but I'm uncertain. This is my controller setup: ...

jqueryruby-on-railsajaxruby-on-rails-4.1

Rails 3.2 - form mistakenly submitted repeatedly

I am working on a project involving the Box model, which includes many box_videos. I have created an edit form to allow users to add box_videos to the box after it has been created: <%= form_tag "/box_videos", { method: :post, id: "new_box_videos", rem ...

javascriptjqueryruby-on-railsruby

Encasing a variety of child elements within a div container

My goal is to group a range of children elements within a div so that I can manipulate them collectively in different locations. The challenge arises from having a list with randomly generated li tags, and no matter how many appear, I need every batch of t ...

javascriptjquerylistchildrenwrapall

Minimize the space between flex items

I'm currently working with a <div> container styled as flex using the following CSS properties: .icon-container { padding: 3px; padding-top: 15px; padding-bottom: 15px; display: flex; flex-direction: column; align-content ...

htmlcssflexbox

Text that fades in and out based on scrolling past a specific point

There's a text containing <p> and <h1>. The text finishes with one <h1>. I'm looking to speed up the Y translation of the <p> twice when I reach the bottom of the document (where the last h1 is located in the middle of th ...

javascriptjquerycss

Customizing HTML Select Elements

Can the HTML Select attribute be customized to have a flatter appearance? Although I can set the border to be 1px solid, the dropdown part still appears 3D and unattractive. ...

htmlcss

Pressing the button results in no action

I am currently developing a program that randomly selects 5 words from a database and inserts them into an array. Although the page loads correctly initially, nothing happens when the button is clicked. None of the alerts are triggered, suggesting that the ...

javascriptphphtmlxml

Troubleshooting problems with CSS affecting the placement of HTML <div> elements

Can you help me with this website? I'm trying to make the divs align next to each other with some spacing in between horizontally. Basically, I want them displayed side by side rather than on top of each other. body { background-image:url('wild ...

csshtml

Learn how to easily filter multiple queries within a table using W3.JS, where each query is delimited by a semicolon (;)

Everything in the code I've typed seems fine, but I'm curious about how to separate each word I search for with a ;. This is the code I have: <!DOCTYPE html> <html> <title>W3.JS</title> <meta charset="utf-8"> <l ...

javascripthtmlw3.js

What is the default DTD used if it is not specified in the doctype declaration?

On my webpage, the doctype is specified as: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> No DTD is explicitly set. I'm curious which DTD will be defaulted in IE? It seems that it doesn't function the same way as "http ...

html

Currently troubleshooting an issue with the CSS that is affecting the table header alignment

At first, I posed this Question and developed my own plugin to accomplish the task. However, I am encountering an unusual CSS issue with the table. Once I applied the plugin, the borders of table cells became disorganized. Here is a jsFiddle showcasing ...

javascriptjqueryhtmlcss

Creating a Dojo HTML template involves incorporating repetitive sections of HTML code within the template structure

I am working with a custom Dojo widget that is based on a template and has an HTML template stored in a separate .html file. Here is the Dojo Widget code snippet: define("dojow/SomeWidgetName",[ "dojo/_base/declare", "dijit/_WidgetBase", "dijit/_Templat ...

javascripthtmldojo

Working with jQuery, parsing JSON data, and making API calls to

Using the jQuery AJAX function to retrieve data from the Flickr API and get the URL for the original image size. $.ajax({ url: "http://api.flickr.com/services/rest/?method=flickr.photos.getSizes&format=json&api_key=708f179518b2093d23f0aef284b5 ...

jqueryjsonflickr