0

这就是我想要完成的。我有两个按钮，当我按下第一个按钮时，它会淡出到 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>
4

3 回答 3

1

我制作了一个 jsFiddle 来解决您的问题。我相信您可以将其调整为您的代码：http: //jsfiddle.net/SFYGX/2/

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

（在尝试之前，请确保您没有像现在这样使用重复的 id (id="blnk")）

于 2012-04-15T19:20:16.637 回答
0

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

于 2012-04-15T19:22:27.647 回答
0

我的解决方案：

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; } ​

演示

于 2012-04-15T19:36:11.447 回答