Question

我正在尝试使用jQuery单击一个链接，然后其中的内容从屏幕右侧进入0px。然后当你再次点击它时，它关闭，一种切换效果。

我目前的jQuery是：

$('.bet-slip-outer').click(function() {
    // Responsive Stuff...
    var windowwidth = $(window).width();

    $('.bet-slip').animate({
        'right': '-240px'
    });
}, function() {
    $('.bet-slip').animate({
        'right': '0px'
    });
});

但是，当我点击.bet-slip时，right:-240似乎优先。

我做错了什么？

干杯

Answer 1

有条件的：

定义正确的风格。

<div class="bet-slip" style="right:0px;"></div>

jquery的

$('button').click(function() {
    if($('.bet-slip').css('right') === '0px' ){
        $('.bet-slip').animate({'right':'-240px'});
    } else {
        $('.bet-slip').animate({'right':'0px'});
    }
});

其他

只有样式：

＆＃13;
＆＃13;
$('button').click(function(){ $('div').toggleClass('right'); });
＆＃13;
div{ position:relative; width:100px; height:10px; background:green; right:-100px; transition:1s; } .right{ right:0px; }
＆＃13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div> </div> <button> f </button>
＆＃13;
＆＃13;
＆＃13;

Answer 2

使用变量检查元素是否已被点击。

toggle = "on";
$('.bet-slip-outer').click(function() {
    // Responsive Stuff...
    var windowwidth = $(window).width();
    if(toggle == "on"){
        $('.bet-slip').animate({
            'right': '0px'
        });
        toggle = "off";
    }else{
        $('.bet-slip').animate({
            'right': '-240px'
        });
    }
});

Answer 3

根据官方文档，.click() method只接受一个处理程序。您不能为此目的声明两个不同的处理程序。有两种解决方案 - 一种是将动画委托给CSS，改为使用.toggleClass()，或者使用有状态代码：

将元素的切换状态存储在自己的jQuery数据对象中
读取数据对象。如果它不存在或者是0，请执行某些操作（条件1）
如果它存在并且是1，则执行其他操作（条件2）

您当然可以将二进制条件1和2修改为您想要达到的效果。

此外，为了防止由于快速点击/切换而导致的动画不稳定，您应该在向队列添加更多动画之前停止动画。这是通过将.stop(true, true)链接到对象来完成的。

＆＃13;

$(function() {
  $('.bet-slip-outer').click(function() {
    // Check state
    if(!$(this).data('toggle') || $(this).data('toggle') == 0) {
      $(this).data('toggle', 1);
      $('.bet-slip').stop(true, true).animate({
        'right': '-240px'
      });
    } else {
      $(this).data('toggle', 0);
      $('.bet-slip').stop(true, true).animate({
        'right': '0'
      });
    }
  });
});

＆＃13;

.bet-slip {
  position: relative;
  }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="bet-slip-outer">
  <div class="bet-slip">bet-slip</div>
</div>

＆＃13;

Answer 4

JS中的快速编码风格变量！

您可以执行以下操作：

$( ".bet-slip-outer .bet-slip" ).toggleClass( "animation" );

然后在你的CSS中你会这样做：

  .bet-slip-outer .bet-slip { right: 0px;}
  .animation { right: -240px;}

为什么要将此选项用于其他选项？

您的Java脚本中没有硬编码STYLE变量，而是将其留给CSS（它为之做了什么）。随着项目的不断发展，如果你继续进行硬编码，它最终会让你的JS代码基础变得有气味。＆＃39; IE：我很难改变这条路！

在点击时创建一个切换

4 个答案: