Bug Tracker

Ticket #10021 (closed bug: fixed)

Opened 3 years ago

Last modified 3 years ago

Can't add negative numbers using the relative-value syntax with .css() and .animate()

Reported by: mtaby@… Owned by: dmethvin
Priority: low Milestone: 1.6.3
Component: css Version: 1.6.2
Keywords: Cc:
Blocking: Blocked by:

Description

When I use the relative-value syntax in my .css() and .animate(), I can't add negative numbers like so:

$('#foo').css('margin-left','+=-1')

This comes up when you're building up the value using string concatenation and you don't know whether the value is positive of negative:

$('#foo').css('margin-left','+='+value)

Here's a jsFiddle which highlights the problem:

 http://jsfiddle.net/F7Ybw/2/

Change History

comment:1 Changed 3 years ago by addyosmani

  • Priority changed from undecided to low
  • Resolution set to wontfix
  • Status changed from new to closed
  • Component changed from unfiled to css

Thanks for submitting a ticket to the jQuery bug tracker. I've never actually seen anyone use relative-value syntax in the way described for negative numbers (ie. +=-1).

Why not simply use the (more common) negative equivalent of +=1 (ie. -=1?).  http://jsfiddle.net/F7Ybw/4/. If there is an uncertainty about where the value used in your string concatenation example is positive or negative, there are many ways you can use to test this.

For example, if the value passed is a string (with or without units) var myOperator = (parseInt(value) <0)? '-=' : '+='; would allow you to get the correct operator to use and you can then simply use $('#foo').css('margin-left', myOperator +value); as per your example.

comment:2 Changed 3 years ago by anonymous

You're right, nobody would write out +=-1 by hand, but my point is, users shouldn't have to write out the tertiary operator by hand when what they're trying to say is perfectly valid. That kind of conditional code is messy and annoying to write. Besides, adding a negative number is a valid mathematical expression :)

comment:3 Changed 3 years ago by dmethvin

  • Status changed from closed to reopened
  • Resolution wontfix deleted

I think this may be a very easy fix, just add the minus sign to the rfxnum regexp in effects.js. The code in css.js needs a bit more tweaking to code but it shouldn't be much.

comment:4 Changed 3 years ago by dmethvin

  • Owner set to dmethvin
  • Status changed from reopened to assigned
  • Milestone changed from None to 1.6.3

comment:5 Changed 3 years ago by dmethvin

Animation already works, css does not.

 http://jsfiddle.net/dmethvin/CupLF/

comment:6 Changed 3 years ago by Dave Methvin

  • Status changed from assigned to closed
  • Resolution set to fixed

Merge pull request #464 from dmethvin/fix-10021-relative-negative-values

Fixes #10021. Allow negative relative values for .css()

Changeset: 3ba72f991dccbae6020c23d6f7a65435f4ca6f03

comment:7 Changed 3 years ago by rwldrn

Landing pull request 476. Fix lint complaints about unescaped -. Follow up to #10021 Fixes #10021.

More Details:

Note: See TracTickets for help on using tickets.