没有显示/隐藏选项的切换方法

时间:2018-03-22 02:39:45

标签: javascript jquery

如何使用 Public Sub confirmValueGrid(value As String) Try If value.ToString <> "" And clm.Substring(0, 6).Equals("columntoDisplay") Then ''row = gridview1.GetSelectedRows(irow) ' e.FocusedRowHandle = 2 still gridview1.SetRowCellValue(row, clm, value) gridview1.UpdateCurrentRow() 'gridview1_LostFocus(Me, Nothing) Else Exit Sub End If Catch 'ignore End Try End Sub 方法但不用于显示和隐藏目的?

例如,当我点击某个div时,我想为它的位置设置动画 .toggle(),然后在第二次点击时返回同一位置$(div).animate({"left":"+=50px"});上的div。

我知道还有其他解决方案,但我想用$(div).animate({"left":"-=50px"})实现这一点,而不隐藏显示div。有什么想法吗?

2 个答案:

答案 0 :(得分:1)

&#13;
&#13;
$("#myDiv").toggle(function() {
    $(this).stop().animate({
       left:"+=50"
    }, 500);
}, function() {
    $(this).stop().animate({
        left:"-=50"
    }, 500);
});
&#13;
#myDiv{
background-color:black;
width:100px;
height:100px;
position:absolute;
left:50px;
}
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>

<div id="myDiv"></div>
&#13;
&#13;
&#13;

希望这能回答你的问题。但是,jQuery 1.9及更新版本不允许使用此功能。

答案 1 :(得分:0)

自1.9以来没有使用点击的切换功能。但你仍然可以用两种方式做到这一点:

for more explaination

$(function(){
  //basic method
  var clicked = false;
  $('#mydiv1').click(function(){
    if(clicked){
      clicked = false;
      $(this).animate({"left":"+=50px"});
    }else{
      clicked=true;
      $(this).animate({"left":"-=50px"});
    }
  });
  
  //create new function like old built-in 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;
    };
  
  $('#mydiv2').clickToggle(function(){
      $(this).animate({"left":"+=50px"});
    }, function(){
      $(this).animate({"left":"-=50px"});
  });
  
});
#mydiv1{
  background-color: yellow;
  width: 50px;
  height: 50px;
  position: absolute;
  left: 100px;
}

#mydiv2{
background-color: blue;
  width: 50px;
  height: 50px;
  position: absolute;
  left: 200px;
  top: 100px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div id="mydiv1"></div>
  <div id="mydiv2"></div>
  
</div>