Troubleshooting issue with Jquery animation from left to right

What's the issue with this code? It is supposed to animate the arrow from left to right and then back to left again repeatedly, but it's not working as expected. Any ideas on why that might be?

function moveRight(){
    $('#myIcon').animate({left: "+=50"}, 1000, function(){
        $('#myIcon').animate({left: "-=50"}, 1000, moveRight)
    })
}
moveRight();
a{
  text-decoration: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#" class="btn btn-danger btn-lg">
<span id="myIcon">←</span>&nbsp; Go Back
</a>

javascriptjqueryhtmlcss

Answer №1

Apply the style position:absolute to the icon element.

function moveRight(){
    $('#myIcon').animate({left: "+=50"}, 1000, function(){
        $('#myIcon').animate({left: "-=50"}, 1000, moveRight)
    })
}
moveRight();
a{
  text-decoration: none;
}

#myIcon{
 position:absolute;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#" class="btn btn-danger btn-lg">
<span id="myIcon">←</span>&nbsp; Go Back
</a>

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

Encountering an issue while trying to set up a fresh react application

Issue encountered when trying to start a new React project ...

javascriptreactjsreact-native

Exploring the depths of nested object arrays and navigating through historical indexes

I am working with nested object arrays within an array and looking to determine the path of a specific key. For instance: const dataList = [ [ [{id: 100,name: 'Test1'}, {id: 120,'Test12'}], [{id: 101,name: 'Test1&apo ...

javascript

Determine the difference between a CSS selector string and an XPath string

Developing a compact querying module (using js) for html is my current project, and I aim to create a versatile query(selector) function that can handle both css selectors and XPath selectors in string form. My dilemma lies in determining whether a given ...

javascripthtmlcssxpath

Tips on organizing and designing buttons within a canvas

let canvas = document.getElementById("canvas"); let context = canvas.getContext("2d"); // for canvas size var window_width = window.innerWidth; var window_height = window.innerHeight; canvas.style.background="yellow" canvas.wid ...

javascripthtmlcsscanvashtml5-canvas

A guide to displaying object values on WordPress websites

I am looking to modify the template file of the ultimate member plugin. https://i.sstatic.net/hwSvw.png I am now trying to access the information stored inside the user object, but I am unsure of how to print or var dump the user object. Can anyone provid ...

javascriptphpwordpresshandlebars.js

Not motivated to write HTML content

Recently, I've been utilizing the lazySizes plugin for optimizing my images. However, I encountered an issue when trying to implement it for HTML content display. Is there a simpler way to achieve this and maintain my current HTML structure? $(&apo ...

javascriptjqueryhtml

The click function is a member of an object within an emit event

I stumbled upon the code snippet below, which triggers the notification-alert event and passes an object as a parameter. this.$root.$emit('notification-alert', { text, type: 'warning', click: () = ...

javascriptvue.jsevents

Tips for creating Angular unit tests that involve setting @Input values and mocking them

As a beginner in Angular, I am currently diving into writing test cases. How can I approach writing unit tests for the following code snippet in Angular/TypeScript? @Input() set myOutputData(res: any) { this.apiError = ''; if (!re ...

javascriptangulartypescriptangular-materialangular-test

How can I ensure that the Bootstrap datePicker is validated as a required field

I am using the it-date-datepicker as a calendar picker, which is a bootstrap-datepicker version based on ab-datepicker. The issue I am facing is that I need to make this field mandatory. I downloaded jquery.validate.js for this purpose but I can't see ...

javascriptjquerybootstrap-4datepicker

Dealing with validations in a personalized aid

Recently, I've been exploring CodeceptJs and have found it quite easy to work with. Currently, I'm utilizing it with NightmareJs for testing a gallery that retrieves data from an interface via JSONP to create a list of images enclosed in <div& ...

javascriptnightmarecodeceptjs

choosing between different options within Angular reactive forms

I am attempting to create a select element with one option for each item in my classes array. Here is the TypeScript file: @Component({ selector: 'app-create-deck', templateUrl: './create-deck.component.html', styleUrls: [' ...

javascripthtmlangulartypescript

Determine the scroll percentage of an element using jQuery

My goal is to create a div that animates from 0% - 100% based on the percentage of an element scrolled. I have defined some variables, but I am struggling with calculating the height as a percentage. Setting the initial width and detecting scroll are str ...

javascriptjquery

CSS classes designed to mimic JavaScript object attribute-value pairs

I stumbled upon some interesting css class-value combinations within HTML tags. It seems like a specific JavaScript code is interpreting this, but it's something I haven't encountered before. I came across this on www.woothemes.com/flexslider/ (y ...

javascriptcss

Is there a way to delay rendering the html until all the content has been fully downloaded?

Whenever I visit my webpage, I notice that the content starts loading without the animation applied to it. It seems like the CSS hasn't finished downloading yet. To solve this issue, I added a preloading bar overlay to signal that the content is still ...

javascripthtmlcssajax

Scrolling horizontally in vue-chartjs-chartwidget

I have a question regarding vue-chartjs. I am looking to achieve a similar result to the one demonstrated in this jsfiddle example: http://jsfiddle.net/mbhavfwm/ Below is the code for my Vue.js component (Chart data is passed through params). &l ...

javascriptvue.jsvuejs2chart.jsvue-chartjs

What is the best way to send an authorized request to a Django view from an external HTML page using AJAX

In django version 1.10, I have created register.html, login.html, and home.html pages for my application. These HTML pages are hosted on separate application servers. Utilizing a Custom User Model, I am able to successfully register users and store their ...

pythonajaxdjangohtmldjango-authentication

What is preventing me from retrieving the values of selected options in jQuery when clicking on an option?

I have a select menu with the following options. <select name="assigneeSelect" id="{{this.commonID}}" class="custom-select sources" key="{{this.id}}" placeholder="{{this.assignee}}"> <option v ...

jquerynode.jsdrop-down-menu

Guide on modifying HTML attribute with TFHpple in the Swift programming language

I have received an HTML string and I want to modify the elements inside them, specifically the img tags, so that they have a style of width = 100% and height set to auto. This way, when I embed these images into a web view, they can easily adjust to fit th ...

htmlcssswifttfhpple

Seeking information on the identity or name of a particular form input field

Seeking to utilize jQuery autocomplete.. I am looking for a way to dynamically replace "hello" in the script below with JavaScript in order to identify either the "name" or "id" of the input field. Since there will be multiple instances on one page, I wi ...

javascriptjqueryajax

Any suggestions for a more efficient way to link together these Bluebird promises?

I have three functions (A, B, C) that each return promises, with B waiting for A to finish and C waiting for B to finish. My current code looks like this: return A(thing) .then(function () { return B(anotherThing); }) .then(function () { return C(som ...

javascriptnode.jsrefactoringpromisebluebird