Question

我发现我的按钮滑开了，即使我试图将其设置为动画的切换点击。我基本上希望按钮滑出内容链接而不会消失按钮。不确定我做错了什么？

＆＃13;

<form class="form-horizontal" role="form" name="frm" novalidate="" >

        <div class="form-group">
          <input type="hidden" class="form-control" id="coc" value="<?php printf('%03d',$i);?>">
        </div>

        <div class="form-group" style="padding-left:10px;">
          <div class="col-sm-3"><label>Agency Name:</label>
          <span ng-show="frm.branch.$dirty && frm.branch.$error.required" class="label label-danger" style="margin-left:10px;">Please Pick an Agency</span>
          <span ng-show="frm.branch.$valid" class="glyphicon glyphicon-ok text-success" style="margin-left:10px;"> </span>        
          <div class="col-sm-3"><label>Last Name:</label>
              <span ng-show="frm.last.$dirty && frm.last.$error.required" class="label label-danger" style="margin-left:10px;">This is Required</span>
              <span ng-show="frm.last.$dirty && frm.last.$error.minlength" class="label label-danger" style="margin-left:10px;">Enter Atleast 2 Characters</span>
              <input ng-model="last" ng-minlength="2" name="last" id="last" type="text" class="form-control" placeholder="Last Name" onkeyup="javascript:this.value=this.value.toUpperCase();" required autocomplete="off">
          </div>
            <div class="col-sm-3"><label>Given Name:</label>
              <span ng-show="frm.first.$dirty && frm.first.$error.required" class="label label-danger" style="margin-left:10px;">This is Required</span>
              <span ng-show="frm.first.$dirty && frm.first.$error.minlength" class="label label-danger" style="margin-left:10px;">Enter Atleast 2 Characters</span>
              <input ng-model="first" ng-minlength="2" name="first" id="first" type="text" class="form-control" placeholder="First Name" onkeyup="javascript:this.value=this.value.toUpperCase();" required autocomplete="off">
          </div>
          <div class="col-sm-3"><label>Middle Name:</label>
              <input ng-model="middle" name="middle" id="middle" type="text" class="form-control" placeholder="Middle Initial" onkeyup="javascript:this.value=this.value.toUpperCase();" autocomplete="off">
          </div>
        </div>
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
              <button ng-disabled="frm.$invalid" type="submit" id="save" class="btn btn-info">&nbsp; Save &nbsp;</button>`

＆＃13;

$(document).ready(function(){
        $('#slidebottom button').toggle(function() {
            $("#outer-nav .navlink-1").animate({left: '-=50', top: '-=50'}, 500);
            $("#outer-nav .navlink-2").animate({left: '=0', top: '-=50'}, 500);
            $("#outer-nav .navlink-3").animate({left: '+=50', top: '-=50'}, 500);
            }, function() {
            $("#outer-nav .navlink-1").animate({left: '+=50', top: '+=50'}, 500);
            $("#outer-nav .navlink-2").animate({left: '=0', top: '+=50'}, 500);
            $("#outer-nav .navlink-3").animate({left: '-=50', top: '+=50'}, 500);
        });
});

＆＃13;

Answer 1

当您想要显示/隐藏元素时，使用

.toggle()。由于您希望#outer-nav中的元素设置动画而不是切换按钮，因此您需要将代码更改为此类代码。

$(document).ready(function(){
    var isToggled = false;

    $('#slidebottom button').click(function() {
        if (!isToggled) {
            $("#outer-nav .navlink-1").animate({left: -50, top: -50}, 500);
            $("#outer-nav .navlink-2").animate({left: 0, top: -50}, 500);
            $("#outer-nav .navlink-3").animate({left: 50, top: -50}, 500);
        } else {
            $("#outer-nav .navlink-1").animate({left: 50, top: 50}, 500);
            $("#outer-nav .navlink-2").animate({left: 0, top: 50}, 500);
            $("#outer-nav .navlink-3").animate({left: -50, top: 50}, 500);
        }

        isToggled = !isToggled; 
    });
});

jQuery动画切换按钮

1 个答案: