Question

这就是我想要完成的。我有两个按钮，当我按下第一个按钮时淡出到50％，当淡出完成时它会消退至100％然后它会循环播放动画，直到按下另一个按钮，并按下下一个按钮完全一样。所以每次点击一个按钮，它就会轻轻闪烁...... 这是可能的吗？

我一直在玩这个，但是不要让它发挥作用。

<html>

<head>
  <title></title>
<style type="text/css">
#blnk a { cursor: pointer; }
</style>

<script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js'></script>

<script language="JavaScript" type="text/javascript">
<!--
$("#blnk a img").children().click(function(){
          $(this).animate({"backgroundColor":""},500);},
    function(){
          $(this).animate({"backgroundColor":""},500);});
//-->
</script>
</head>

<body>
    <div id="blnk"><a src="#"><img src="http://www.auviproducciones.com/more/imagenes/imagen5.jpg"></a></div>
    <div id="blnk"><a src="#"><img src="http://www.auviproducciones.com/more/imagenes/imagen6.jpg"></a></div>
</body>
</html>

Answer 1

我做了一个解决你问题的jsFiddle。我确信您可以根据代码进行调整：http://jsfiddle.net/SFYGX/2/

让我解释一下我在那里做了什么：点击，我将所有不透明度重置为1，并停止所有动画，然后，我开始一个递归循环来为点击的项目设置动画。

（在尝试之前，请确保您不要像现在这样使用重复ID（id =“blnk”））

Answer 2

在animate函数上有一个你可以使用的回调。如果将动画放在函数中，则可以使用回调再次调用该函数。在函数中，您可以包含一个在发生某些事情时设置的标志，并停止循环或调用另一个函数。

Answer 3

我的解决方案：

的javascript：

$(function() {
    var currentId;
    var animate = function(obj) {
            if (currentId == $(obj).attr('id')) $(obj).fadeTo('slow', 0.5, function() {
                $(obj).fadeTo('slow', 1);
                animate(obj);
            });
        }
    $(".blnk a img").click(function() {
        currentId = $(this).attr('id');
        animate(this);
    });
});

HTML：

<div class="blnk"><a src="#"><img id="img1" src="http://www.auviproducciones.com/more/imagenes/imagen5.jpg"></a></div>
<div class="blnk"><a src="#"><img id="img2" src="http://www.auviproducciones.com/more/imagenes/imagen6.jpg"></a></div>

的CSS：

.blnk a { cursor: pointer; }

demo

jQuery Button淡入循环，直到按下另一个按钮

3 个答案: