Question

他需要以这种方式行动：

    $(window).load(function(){ 
        $('.slogan').delay('2000').fadeOut('300', function(){
                    $('.slogan2').fadeIn('slow').removeAttr('display');
        });
    });

div .slogan 3秒，div .slogan2在返回div .slogan后3秒3秒 - 依此类推到无限远。

有人可以在我的代码中添加一些内容吗？

Answer 1

以下内容将与淡入淡出重叠

＆＃13;

function fade(delay, speed) {
  $('.slogan1').delay(delay).fadeToggle(speed);
  $('.slogan2').delay(delay).fadeToggle(speed, function() {
    fade(delay, speed)
  });
}

fade(2000, 1000);

＆＃13;

.slogan {
  width: 200px;
  height: 200px;
  position: absolute;
}
.slogan {
  background: blue;
}
.slogan2 {
  background: green;
  display: none;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="slogan slogan1"></div>
<div class="slogan slogan2"></div>

＆＃13;

以下将逐个播放淡出

＆＃13;

function fade(delay, speed) {
  var slogan1 = $('.slogan1'),
      slogan2 = $('.slogan2');
  
  slogan1.delay(delay).fadeOut(speed, function() {
    slogan2.fadeIn(speed, function() {
      slogan2.delay(delay).fadeOut(speed, function() {
        slogan1.fadeIn(speed, function() {
          fade(delay, speed)
        });
      })
    });
  });
}

fade(2000, 1000);

＆＃13;

.slogan {
  width: 200px;
  height: 200px;
}
.slogan {
  background: blue;
}
.slogan2 {
  background: green;
  display: none;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="slogan slogan1"></div>
<div class="slogan slogan2"></div>

＆＃13;

Answer 2

你可以通过以下方式完成：

HTML：

<div class="slogan">slogan</div>
<div class="slogan2" style="display: none;">slogan2</div>

JavaScript的：

$(document).ready(function(){ 
        doInfiniteLoop(3000, 1000);
    });


function doInfiniteLoop(delayTime, fadeTime){
        $('.slogan').delay(delayTime).fadeOut(fadeTime,function(){
                        $('.slogan2').fadeIn(fadeTime,function(){
                            $('.slogan2').delay(delayTime).fadeOut(fadeTime,function(){
                                $('.slogan').fadeIn(fadeTime, function(){
                                    doInfiniteLoop(delayTime, fadeTime);
                                });
                            });
                        });
        }); 

}

DEMO

Answer 3

将动画移动到单独的功能，并在完成后调用它，长版本将是：

<input type="text" id="txtSample" onkeypress="return isNumberKey(event,this)"/>



function isNumberKey(evt, element){

        var charCode = (evt.which) ? evt.which : event.keyCode
        if (charCode > 31 && (charCode < 48 || charCode > 57) && !(charCode == 46 || charCode == 8 || charCode == 45))
            return false;
        else {
            var len = $(element).val().length;

            // Validation Point
            var index = $(element).val().indexOf('.');
            if ((index > 0 && charCode == 46) || len == 0 && charCode == 46) {
                return false;
            }
            if (index > 0) {
                var CharAfterdot = (len + 1) - index;
                if (CharAfterdot > 3) {
                    return false;
                }
            }

            // Validating Negative sign
            index = $(element).val().indexOf('-');
            if ((index > 0 && charCode == 45) || (len > 0 && charCode == 45)) {
                return false;
            }
        }
        return true;
    }

需要添加到我的jQuery函数无限循环

3 个答案: