how to target specific css element in javascript?

Question

I've got my code:

$(document).ready(function() {
 $('#topznav ul li').click(function() {               
  $('#topznav').animate({
     marginLeft: '10px'        
   }, 400);
});                                          
});

I've got a question about the second line. It won't work. I mean, nothing really animates. The script file is loaded correctly because other functions work. What am I doing wrong here?

Animating margins can be tricky sometimes. Try some different animation just to test if it works, for instance a fade. — jackJoe
– jackJoe, Commented Oct 4, 2013 at 7:54

jackJoe · Accepted Answer · 2013-10-04 07:55:54Z

3

try this:

$(document).ready(function() {
 $('#topznav ul li').click(function() {               
  $('#topznav').animate({
     marginLeft: '+=10px'        
   }, 400);
});                                          
});

answered Oct 4, 2013 at 7:55

jackJoe

11.1k8 gold badges54 silver badges66 bronze badges

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

Comments

Ajith S · Accepted Answer · 2013-10-04 09:24:58Z

Here I am posting what I got

<html>
    <head>
        <script src="http://code.jquery.com/jquery-1.9.0.min.js"></script>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
        <script type="text/javascript">
            $(document).ready(function() {
                $('#topznav ul li').click(function() {
                    $('#topznav').animate({
                        marginLeft: '+=10px'        
                    }, 400);
                });                                          
            });

        </script>
    </head>
    <body>
        <div id="topznav">
            <ul >
                <li>
                    <a href="javascript:void(0);">test1</a>
                </li>

                <li>
                    <a href="javascript:void(0);">test2</a>
                </li>                
                <li>
                    <a href="javascript:void(0);">test3</a>
                </li>
            </ul>
        </div>
    </body>
</html>

This works fine

Collectives™ on Stack Overflow

how to target specific css element in javascript?

2 Answers 2

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Related