Home/ Questions/Q 8139907
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-06T11:59:00+00:00

I’m trying to learn html and jquery. My issue is that I have box

  • 0

I’m trying to learn html and jquery. My issue is that I have box that I want to modify based on what the user clicks. For example if the user clicks fade the box should fade and slide would make the box slide. I’m stuck on how to connect one box with multiple functions and links. 

<script type="text/javascript" src="jQuery-1.7.min.js"></script>
<script type="text/javascript">

    $ (function() {
        $('a').click(function() {
            $('#box').fadeOut(3000);
        });
    });

</script>
</head>

<body>
<div id="box"></div>
<li><a href="#">fade</a></li>
<li><a href="#">slide down</a></li>
<li><a href="#">slide right</a></li>
</body>
</html>

Here is the CSS:

#box
{
background: red;
width: 300px;
height: 300px;
}
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Give your anchors ids and setup events for each id.

    <li><a href="#" id="fade">fade</a></li>
<li><a href="#" id="slided">slide down</a></li>
<li><a href="#" id="slider">slide right</a></li>

    And for each event, do the respective animations

    $('#fade').on('click', function() {
          $('#box').fadeOut(3000);
});
    • 0