Question

I’m trying to make a FadeOut effect after clicking a link. But my syntax seems to be wrong. When i click, it fadeout, and go to a “~~nothing~~.html” page, it just dont get the value to compose the variable.
the id boo is attached to the tag (body id=”boo”) and in the css stylesheet the id #boo is set to display:none;
I’m using jquery-1.7.2.min

<script type="text/javascript">
    $(document).ready(function(){
        $('#go').click(function(e) { //When something with the id 'go' is clicked, 
            e.preventDefault(); //Prevent default action (?)
            var url = $('#go').val() + ".html"; //set url as "Clicked 'go' value + .html" (374.html"
            $('#boo').fadeOut(600, function() { window.location.href = url; }); //fadeOut what is with the 'boo' id (body), and load the created address as a new page (?)
        });
    });
</script>
<a id="go" value="374" href="#">Go to page 374</a>

the 374.html page is in the same folder. If possible, please explain what have i done wrong, and make it step by step. I’m new to jquery.

Thank you!

Answer 1

the .val() method only applies to fields, just putting a value attribute on any element will not be read with the val() method.

Instead use .attr('value').

Or, its better practice to use data-* attributes and use the data() method:

<script type="text/javascript">
    $(document).ready(function(){
        $('#go').click(function(e) { //When something with the id 'go' is clicked, 
            e.preventDefault(); //Prevent default action (?)
            var url = $('#go').data('value') + ".html"; //set url as "Clicked 'go' value + .html" (374.html"
            $('#boo').fadeOut(600, function() { window.location.href = url; }); //fadeOut what is with the 'boo' id (body), and load the created address as a new page (?)
        });
    });
</script>
<a id="go" data-value="374" href="#">Go to page 374</a>