时间戳

首页 > 解决方案 > jQuery 在另一个图标上切换（脉动）一个图标

jquery - jQuery 在另一个图标上切换（脉动）一个图标

问题描述

我尝试实现以下目标：

我正在使用 MDI 图标集，但它当然应该与任何其他图标集相同（fa，...）。我们有一个票务系统启动并运行，我们也在实施类似“建议一个功能”的东西。

现在我们有了表单的提交按钮，旁边有一个图标：

我发现 jquery 也有$( "#toggle" ).toggle( "pulsate" );，而且看起来很棒。

让我们想象“o”是一个没有打开的灯泡，“ö”是一个打开的灯泡。如果在用户点击它之前一直关闭灯泡，它会看起来很棒。和灯泡闪烁。就像一个旧灯泡。提交本身的延迟当然应该延迟。

默认图标是 mdi-lightbulb (o) 并且 onclick mdi-lightbulb-on (ö) 应该会在 mdi-lightbulb 图标上闪烁

编辑：按钮是 type="button" 来测试效果，而不是在尝试时永久重新加载站点。

<button type="button" class="btn btn-success toggleicon">
    <i class="mdi mdi-lightbulb tochange"></i> 
    Idee absenden
</button>

*************************************************************

<script>

$('.toggleicon').on('click', function(){
  // $('.tochange').removeClass('mdi-lightbulb');
  // $('.tochange').addClass('mdi-lightbulb-on');
  $('.tochange').toggle( "pulsate" );
});

$('form').submit( function(event) {
    var formId = this.id,
        form = this;
    mySpecialFunction(formId);

    event.preventDefault();

    setTimeout( function () { 
        form.submit();
    }, 1000);
}); 

</script>

我有切换本身，但没有脉动：

  $('.toggleicon').on('click', function(){
    $('.toggleicon').find('i').toggleClass('mdi-lightbulb mdi-lightbulb-on');
  });

标签： jquery

解决方案

您可以使用effectas 相反，toggle这样它就不会隐藏目标元素，并且从这里您可以简单地在类之间切换，而不是元素的可见性。

$('#lightbulb').click(function() {
  var $bulb = $(this);
  var state = $bulb.data('on');
  var switches = {
    'false': 'mdi-lightbulb-on',
    'true': 'mdi-lightbulb-outline'
  };

  $('.mdi', this).effect('pulsate', {
    complete: function() {
      $bulb.data('on', !state);

      $(this).removeClass(this.className).addClass('mdi ' + switches[state]);
    }
  })
});
#lightbulb > .mdi-lightbulb-on {
  color: #ef950f;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet" href="//cdn.materialdesignicons.com/3.3.92/css/materialdesignicons.min.css">

<button id="lightbulb" data-on="false">
  <span class="mdi mdi-lightbulb-outline"></span>
  <span class="light-state">Light</span>
</button>

推荐阅读