Question

我试图学习html和jquery。我的问题是，我根据用户点击的内容修改了我要修改的框。例如，如果用户点击淡入淡出，则框应该淡出并且滑动将使框滑动。我坚持如何将一个盒子与多个功能和链接连接起来。

<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>

这是CSS：

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

Answer 1

为每个ID提供锚点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>

对于每个事件，请执行相应的动画

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

Answer 2

将您的函数移动到document.ready语句中，并在LI的

上添加一个选择器

$(document).ready(function() {

$('a.fade').on("click", function(e) {
    e.preventDefault();
    $('#box').fadeOut(3000);
});

//rest of animate functions

});

http://jsfiddle.net/GT9jh/

Answer 3

你可以这样： jsFiddle example 。

<强> HTML

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

<强>的jQuery

$('a').click(function() {
    effect = $(this).attr('rel').split(' ')[0];
    direction = $(this).attr('rel').split(' ')[1];
    $('#box').hide(effect, { direction: direction }, 1000);
});

使用html链接连接jquery函数

3 个答案: