0

我正在尝试学习 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;
}
4

3 回答 3

4

为每个 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);
});
于 2012-06-27T20:27:15.520 回答
0

将您的函数移动到 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/

于 2012-06-27T20:29:24.200 回答
0

你可以这样：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);
});​
于 2012-06-27T20:34:09.160 回答