0

When I type 

$(document).ready(function() {
    $("#equals").click(function() {

        $("#water").animate({margin-top: "-200px", opacity: ".65"}, 2000);

    });
});

into Dreamweaver the $("#water") line gets an error and won't tell me what it is. Please help!

Improve this question
10
  • 1
    can you post the associated HTML? Commented Jun 11, 2015 at 16:16
  • 1
    Some html would be nice :) Commented Jun 11, 2015 at 16:16
  • 1
    HTML and errors might help us out Commented Jun 11, 2015 at 16:16
  • 3
    For starters, margin-top should be in quotes... its not a valid json otherwise. Commented Jun 11, 2015 at 16:17
  • 1
    Are you adding jquery library? Commented Jun 11, 2015 at 16:18

3 Answers 3

Reset to default
3

The problem is margin-top which contains a hypen and it is not wrapped in quotes due to which you must be getting javascript error on the page. Change it to "margin-top" then hopefully you should be good.

$("#water").animate({"margin-top": "-200px", opacity: ".65"}, 2000);

There is a nice article on JavaScript properties and when to omit quotes in a json object. Take a look at it https://mathiasbynens.be/notes/javascript-properties

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

2

I don't know what your error is, but what I see is invalid JSON.

margin-top should be in quotes... its not a valid json otherwise

One simple check is enter the following into your browser's console:

var x = {margin-top: 5};

You'll get an error there. :\

Improve this answer

Comments

1

To fix and to make your JavaScript code looks neater

  • Hyphen in the property name confuses the compiler, so wrap that property name with quotes.

Thus, your code then becomes:

$('#water').animate({'margin-top': '-200px', 'opacity': .65}, 2000);

PS. I removed my last two suggestions. Please check from the comments in case you're curious.

Improve this answer

6 Comments

You should remove your second bullet point. Any number passed as a new property value to animate can be passed as a number or string, interchangeably. There is nothing wrong with passing it as a string, and no benefit either way; that bullet point is pure opinion and is not a convention. Even marking it as a "trivial" change isn't really sufficient.
You should also remove your last bullet point as it is also subjective. It is up to the developers own discretion whether or not they use single or double quotes and both have advantages and disadvantages. It is the developer's own conventions that dictate which they use and their own style the types of things they implement that govern which has more advantages to them, and thus which they should "usually" use.
@ZacharyKniebel I agree with your arguments. However, the last bullet was just a suggested coding guideline by airbnb. The key purpose is to make JS string less confusing with HTML when combining between the two. However, it's not a convention. You're absolutely correct.
I hear you on the quotes, but still...I'm not going to attack anyone's corporate/team/personal conventions, but that's all that is: a localized convention. It's not like we're talking about using the variable name $this for $(this) or even prepending the $ onto the name of any variable holding a jQuery object. The quote conventions are just for smaller units so that they can be consistent. This means that the OP's company may have their own convention or may not have any at all. It's another "trivial" change that really shouldn't be made unless their own conventions require it.
@ZacharyKniebel Your explanation is really clear and straightforward. I like this style of discussion where people interchange their knowledge and opinion. It's constructive :)
|

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.