css:
#obj { display:block; width:10%; height:30px; background-color:#006600; }
javascript:
$(document).ready(function() {
$('#obj').css('width','+=10');
});
html:
<span id="obj"></span>
it won't grow.
-
1.css('width','+=10');, is an accepded syntax As of jQuery 1.6. , +=10 adds 10 px, always unless you use % in the jQbeardhatcode– beardhatcode2011-07-10 18:17:44 +00:00Commented Jul 10, 2011 at 18:17
-
it worked for me using jquery 1.6.4. What's the version of jquery that you're using?OnesimusUnbound– OnesimusUnbound2011-12-19 15:22:59 +00:00Commented Dec 19, 2011 at 15:22
Add a comment
|
4 Answers
$(document).ready(function() {
$('#obj').width($('#obj').width()+10)
});
--------Edit---------------
I just checked jQuery resources: your code is correct too , but for that you need jQuery version 1.6+
try this http://jsfiddle.net/nvmwu/2/ with different versions of jQuery
-----------Extract from Jquery Api--------
As of jQuery 1.6, .css() accepts relative values similar to .animate(). Relative values are a string starting with += or -= to increment or decrement the current value. For example, if an element's padding-left was 10px, .css( "padding-left", "+=15" ) would result in a total padding-left of 25px.
3 Comments
beardhatcode
.css('width','+=10');, is an accepded syntax As of jQuery 1.6
Rpbbdoys
hum maybe it won't work cuz <script type="text/javascript" src="ajax.googleapis.com/ajax/libs/jquery/1.5.2/…>
Praveen Prasad
@rpbd: yes you need to have jQuery 1.6+
$(function() {
$('#obj').css('width', function () {
return $(this).width() + 10;
});
});
4 Comments
Lightness Races in Orbit
(that was the last time)
Lightness Races in Orbit
Recursively self-unfulfilling prophesy
Tomalak
I am bewildered by the fact that you somehow managed to remember this post and came back to it, too.
Lightness Races in Orbit
I didn't; I got an upvote on my answer and the subsequent notification in blackbeard's black bar. Sometimes I follow those for nostalgia's sakes.
Works for me in FF5, but only as of jQuery 1.6, and your comments elsewhere indicate that you are using jQuery 1.5.2.
In fact, the documentation even says this:
As of jQuery 1.6, .css() accepts relative values similar to .animate(). Relative values are a string starting with += or -= to increment or decrement the current value. For example, if an element's padding-left was 10px, .css( "padding-left", "+=15" ) would result in a total padding-left of 25px.
Please read it next time.
answered Jul 10, 2011 at 18:24
Lightness Races in Orbit
387k77 gold badges670 silver badges1.1k bronze badges
Comments
I had this problem using jQuery 1.6.1. Updated to 1.7.1 and it works.
Looks like this was fixed in 1.6.2. From the release notes:
".css() doesn’t work with relative values on hyphenated properties"
http://bugs.jquery.com/ticket/9237
http://blog.jquery.com/2011/06/30/jquery-162-released/
