0

私はhtmlとjqueryを学ぼうとしています。私の問題は、ユーザーがクリックしたものに基づいて変更したいボックスがあることです。たとえば、ユーザーが[フェード]をクリックすると、ボックスがフェードし、スライドするとボックスがスライドします。1つのボックスを複数の機能やリンクに接続する方法にこだわっています。 

<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の例。

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 に答える