3 
<script>
$("#right").click(function(){
  $(".block").animate({"left": "+100px"}, "slow").fadeTo("slow", 0.33);
});

$("#left").click(function(){
  $(".block").animate({"left": "+50px"}, "slow").fadeTo("slow", 0.99);;
});
</script>

これは私のスクリプトです。ご覧のとおり、ボタンを使用して.blockを左右に移動したいのですが、1つのボタンで機能させる方法が見つかりません。

だから私はボタンが右に移動するように.blockをトリガーし(最初のクリックで)、移動した後、.blockを左に移動するようにトリガーします(2回目のクリック)。繰り返し作業することができます。

どうやってやるの？「if」関数を使用する必要がありますか?

4

4 に答える 4

2

試してみてください：サンプル

$("#right").click(function () {
   if (!$(".block").hasClass("Moved")) {
       $(".block").animate({
           "left": "+100px"
       }, "slow").fadeTo("slow", 0.33).addClass("Moved");
   } else {
       $(".block").animate({
           "left": "+50px"
       }, "slow").fadeTo("slow", 0.99).removeClass("Moved");
   }
});

別のオプション：

このような小さなプラグインを使用してください。

(function($) {
    $.fn.clickToggle = function(func1, func2) {
        var funcs = [func1, func2];
        this.data('toggleclicked', 0);
        this.click(function() {
            var data = $(this).data();
            var tc = data.toggleclicked;
            $.proxy(funcs[tc], this)();
            data.toggleclicked = (tc + 1) % 2;
        });
        return this;
    };
}(jQuery));

そして、あなたのページのどこでも同じようにそれを使用してください：

$("#right").clickToggle(function () {
    $(".block").animate({
        "left": "+100px"
    }, "slow").fadeTo("slow", 0.33);
}, function () {
    $(".block").animate({
        "left": "+50px"
    }, "slow").fadeTo("slow", 0.99);;
});
于 2013-03-09T05:13:46.960 に答える
0

これはあなたが探していたqhatですか？

HTML：

<div class="block"></div>
<button type="button" id="move">Move</button>

jQuery：

$("#move").click(function () {
    $(".block").animate({
        left: "+100px"
    }, "slow")
        .animate({
        opacity: 0.33
    }, "slow")
        .animate({
        left: "+50px"
    }, "slow")
        .animate({
        opacity: 0.99
    }, "slow");
});

CSS：

.block {
    background: blue;
    width: 100px;
    height: 100px;
    position: absolute;
    left: 0;
    top: 0;
}
#move {
    margin-top: 150px
}

ここでフィドル

于 2013-03-09T05:15:39.770 に答える
0

あなたがしていることは以下の通りです。

$("#right").click(function(){
  $(".block").animate({"left": "+100px"}, "slow").fadeTo("slow", 0.33);
});

$("#left").click(function(){
  $(".block").animate({"left": "+50px"}, "slow").fadeTo("slow", 0.99);;
});

左または右をクリックするたびに、左のプロパティが増加します。つまり、右に移動するアニメーション コードが存在しません。

;;左クリック イベント コードからも削除します。

試す

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
    <title>StackOverFlow</title>
    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript">
        $(function()
        {
            $("#right").click(function(){
                 $(".block").animate({
                    left: "100px"
                }, 1500 );
            });

            $("#left").click(function(){
                $(".block").animate({
                    left: "0"
                }, 1500 );
            });
        });
    </script>
</head>
<body>

<div>
<button id="left" type="button">Left</button>
<button id="right" type="button">Right</button>
</div>

<div class="block" style="border:1px solid red;width:100px;height:100px;position: absolute;"></div>

</body>
</html>
于 2013-03-09T05:07:46.970 に答える
0

試す

$(".left").toggle(function(){
    $(".block").animate({"left": "+100px"}, "slow").fadeTo("slow", 0.33);
}, function(){
    $(".block").animate({"left": "+50px"}, "slow").fadeTo("slow", 0.99);
});

ここで .toggle() の詳細を読むことができます: http://api.jquery.com/toggle-event/

于 2013-03-09T04:48:47.250 に答える