Using jQuery to slide elements across the page

I've been attempting to incorporate a sliding effect into my website, but I'm running into an issue where the sliding only occurs on the first click and I can't figure out why. Here is the code snippet I've been using: Html : 

$("#go").click(function() {
  $(".block").animate({
    right: 85
  }, {
    duration: 800,
    step: function(now, fx) {
      $(".block:gt(0)").css("right", now);
    }
  });
});
div {
  position: relative;
  background-color: #abc;
  width: 70px;
  height: 70px;
  float: left;
  margin: 5px;
}
<p>
  <button id="go">Run »</button>
</p>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>

javascriptjquerycss

Answer №1

The solution lies in the code snippet '+=85'.

$("#go").click(function() {
  $(".block").animate({
    right: '+=85'
  }, {
    duration: 800,
    step: function(now, fx) {
      $(".block:gt(0)").css("right", now);
    }
  });
});
div {
  position: relative;
  background-color: #abc;
  width: 70px;
  height: 70px;
  float: left;
  margin: 5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<p>
  <button id="go">Run »</button>
</p>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>

Furthermore, the purpose of the step function in this context remains unclear to me.

Answer №2

To increase the number, simply use the += in the code snippet provided. With each click, 85 pixels will be added to the right position. Using += translates to {right = right + 85}, alternatively, you can also utilize -= for negative increments as {right = right - 85}

For more information, visit: http://api.jquery.com/animate/

$("#go").click(function() {
  $(".block").animate({
    right: '+=85'
  }, {
    duration: 800,
    step: function(now, fx) {
      $(".block:gt(0)").css("right", now);
    }
  });
});
div {
  position: relative;
  background-color: #abc;
  width: 70px;
  height: 70px;
  float: left;
  margin: 5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>
  <button id="go">Run »</button>
</p>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>

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

Unexpected errors causing havoc in my internet browser

I am facing difficulties uploading large files (~ 2 GB) on my server. To prevent crashes caused by huge files, I have removed the bodyParser from Express. However, the crash error occurs randomly, making it challenging to pinpoint the exact cause. The cod ...

javascriptnode.jsuploadexpressformidable

What is the best way to apply a border-radius to the top of bars in @nivo/bar?

Is it possible to apply a border radius to the tops of each stack in a stacked responsive bar created from the Nivo library, without affecting the bottom? Currently, the responsive bar's border radius applies to both the top and bottom. Thank you! ...

javascriptcssreactjsnivo-react

Uncommon Two-Toned CSS Gradients

How can I create a button that matches the attached image using CSS? I know how to achieve the border-radius, but I'm struggling with the color. Any tips? I attempted something like this: .button { border-radius: 0 4px 4px 0; background-ima ...

csslinear-gradients

Using a variable as an argument for a DOM function in JavaScript

I found this code snippet on a website and made some changes to it. However, the modified code below is not functioning as expected. My goal was to hide the div with the id "demo1", but for some reason, it's not working. What could be causing this is ...

javascripthtmldom

Guide for accessing Javascript documentation via console?

There are many times when I am coding in Python, that I find myself wanting to quickly access the documentation for a function. In the iPython console, I can easily do this by entering dir?? which retrieves the documentation for the dir function. Is ther ...

javascriptgoogle-chromedocumentation

React and React Router are causing the login screen layout to persistently display

The MUI Theme Provider I have includes a Layout with Dashboard and Order screens. Even though the user hits the '/' endpoint, the Login Screen should be displayed instead of the Layout. -App.js <ThemeProvider theme={theme}> <Router> ...

javascriptreactjsreact-routermaterial-uireact-router-dom

Specify the data type of a nested object in a React component with TypeScript

Interface Button{ buttonTitle: { name?: string; } } What is the best way to specify a type for the buttonTitle property? ...

javascriptnode.jstypescript

Refresh the HTML table following each AJAX request

Each time my AJAX requests are made, new rows keep getting added to my HTML table. I need the table to be updated with fresh data on each call, without appending. This is my current code: var data = $('#data_input').val(); var tableRef = docume ...

javascriptjqueryhtmlajax

Error encountered due to circular structure in the data being posted in the

const formulaData = $(htmlContainer).find("ins").map(function (i, el) { return { fName: $(el).attr("data-record-name"), fID: $(el).attr("data-record-id"), fContent: $(el).text() } }); //keep if (for ...

javascriptjsontypeerror

Change PHP code to a JSON file format

I am currently learning Laravel and my current focus is on how to send a JSON file from the back end to the front-end. I intend to utilize this JSON data to generate a graph. Within my model, I have created a function that retrieves values and timestamps ...

javascriptphpjsonlaravel

Ways to align text on the left within a centered format

It seems like there is something missing here. I am struggling to align text to the left in a centered div. Below is an example of my final work: <div class="grid-row"> <img src="http://www.fununlimitedsports.com/wp-content/images/istock ...

htmlcsstext-alignment

Retrieve data using Ajax querying from a specific data source

Currently, I am attempting to construct a custom query using Ajax to interact with PHP/MySQL. Here is what I have so far: Javascript code: var i=2; fetchFromDBPHP("name", "tblperson", "id="+i); function fetchFromDBPHP(column, table, condition) { ...

javascriptphpmysqlajax

What is the method for linking an icon in an iconfont using a keyword?

For my project, I would like to incorporate icon fonts and customize the font file using FontForge. I understand that glyphs can be referenced by unicode in HTML or CSS, for example <i>&#xe030;</i> and &::before{content: "\e030";} ...

cssfont-facewebfontsicon-fonts

How to Shift Focus to a Component in Vue.js

Within a container, I have a form section enclosed by a component that remains hidden due to the use of v-if. Upon clicking a button, the boolean value is toggled, revealing the previously concealed component. At this point, I aim to shift focus to the ini ...

javascriptvue.jsfocusaria-live

Utilizing Node.js ORM2 callback functions with custom parameters

Currently, I am developing models using a for loop: for (var j = 0; j < data.length; j++) { models.MyModel1.create({ name : data[j].name }, function(err, model){ if (err) { throw err } ...

javascriptnode.jscallbacknode-orm2

Develop a nodejs script to make a request using a curl or similar method

Can anyone help me figure out how to replicate the functionality of this OpenSSL command using Node.js or curl? The command is: openssl s_client api-prd.koerich.com.br:443 2> / dev / null | openssl x509 -noout -dates. I have been unsuccessful in my at ...

javascriptnode.jscurlopenssl

Using an external npm module in TypeScript can result in the tsc output directory being modified

In my TypeScript project, I have set up the build process to generate JavaScript files in the ./src/ directory. Everything works smoothly when building against existing npm modules, such as Angular 2 imports. However, I encountered a strange issue when I ...

javascriptangularjsnode.jstypescriptnpm

Vue.js encountered an error while trying to load the component: either the template or render function is not

Currently I am delving into the realm of Vue.js paired with Laravel by following this series, where the narrator seems to breeze through without encountering any errors. Unfortunately, when I attempted to change the route, a pesky error made an appearance. ...

javascriptlaravelvue.js

The toggle-input component I implemented in React is not providing the desired level of accessibility

Having an accessibility issue with a toggle input while using VoiceOver on a Mac. The problem is that when I turn the toggle off, VoiceOver says it's on, and vice versa. How can I fix this so that VoiceOver accurately states whether the toggle is on o ...

javascriptreactjstypescriptnext.jsaccessibility

Changing a background image url using jQuery by clicking a button

I'm struggling to find a way to use jQuery to add a background image URL to my CSS. Everything I've attempted so far has been unsuccessful. let button = document.querySelector('form button.btn') button.addEventListener('click&ap ...

javascriptjqueryhtmlcss