Question

我需要在线路填充线路持有者之后做一些动作。例如：当你点击circle1并且线路运行到，我需要得到警报。

试了一下：

if ($('#line').width() = 100) {
  alert('something should happen with button');
}

我做错了什么以及如何解决它？

Answer 1

= assignment 
== means comparison without strict type checking 
=== means comparison with strict type checking

a = b始终在javascript中返回true，因此if条件将始终运行

Answer 2

以下是感知css动画或转场何时结束的方法，特别是因为.addClass()没有回复，.animate()也是如此：

$(document).ready(function(){
    var $line = $('#line'),
        tEvents = 'webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend';
    $('#circle1').click(function(){
        $line.css('width','101px').addClass('transition-slow');
    });

    $('#circle2').click(function(){
      $line.css('width','225px').addClass('transition-slow');
    });
    $('#circle3').click(function(){
      $line.css('width','350px').addClass('transition-slow');
    });
    $line.on( tEvents, function() {
        alert( 'done' );
    });  
});

JS FIDDLE DEMO

参考：http://blog.teamtreehouse.com/using-jquery-to-detect-when-css3-animations-and-transitions-end

Answer 3

检查== - 单=表示分配。

Answer 4

你已经做得对了，只需用比较“==”更改作业“=”。

if ($('#line').width() == 100) {
  alert('something should happen with button');
}

Answer 5

永远不会是100.你的意思是大于100？

此外，我猜你想在每次点击按钮时检查线宽。因此需要将它放在每个事件处理程序中。

$(document).ready(function(){
    $('#circle1').click(function(){
      linewidth();
      $('#line').css('width','101px').addClass('transition-slow');
    });
    $('#circle2').click(function(){
      linewidth();
      $('#line').css('width','225px').addClass('transition-slow');
    });
    $('#circle3').click(function(){
      linewidth();
      $('#line').css('width','350px').addClass('transition-slow');
    });

    function linewidth() {
        $("#line").bind("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd", function(){
            if ($('#line').width() > 100) {
              alert('something should happen with button');
            }
            $("#line").unbind();
        });
    }
});

更新：添加了提醒延迟。

在另一个操作结束后执行操作

5 个答案: