Question

我创建了一个闪光效果，运行时我想显示一个隐藏的div。这就是我到目前为止......

function flash(e) {
        $('.flash')
        .show()  //show the hidden div
        .animate({opacity: 0.5}, 300)
        .(".mydiv").fadeToggle('fast')	
        .fadeOut(300)
       .css({'opacity': 1});
    }
    
    flash();

.mydiv {
  display:none;
}
.flash {
  background:green;
  height:500px;
  width:500px;
  display:none;
  position:fixed;
  top:0;
  left:0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="mydiv">
    My Div
</div>

<div class="flash"></div>

如果我拿出显示隐藏div的行然后它正常工作，是否有一种不同的链接方式，以便在淡出之前显示div？

Answer 1

＆＃34; chaining＆＃34; jQuery实现的系统涉及在jQuery对象上引用对象属性（jQuery方法）。在这一行：

    .(".mydiv").fadeToggle('fast')

因此.(".mydiv")没有意义，而且它是一种JavaScript语法错误。

如果你想淡出那个＆＃34; mydiv＆＃34;动画完成后，您必须在.animate()方法调用上使用回调：

    $('.flash')
    .show()  //show the hidden div
    .animate({opacity: 0.5}, 300, function() {
        $(".mydiv").fadeToggle('fast')  
            .fadeOut(300)
            .css({'opacity': 1});
    });

现在，通过同时调用.fadeToggle() 和 .fadeOut()，并不清楚您的意图。当您调用方法时，所有动画例程立即启动但是他们不会立即完成，并且链中的下一个方法调用不会等待为此。

Answer 2

您可以使用解决方案

function flash(e) {
  $('.flash')
    .show()  //show the hidden div
    .animate({opacity: 0.5}, 300)
    .prev(".mydiv").fadeToggle('fast')	
    .fadeOut(300)
    .css({'opacity': 1});
}

flash();

.mydiv {
  display:none;
}
.flash {
  background:green;
  height:500px;
  width:500px;
  display:none;
  position:fixed;
  top:0;
  left:0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="mydiv">
    My Div
</div>

<div class="flash"></div>

我使用jQuery prev方法获取.myDiv元素。

希望这会对你有所帮助。

语法中的jQuery链接错误 - 意外的令牌

2 个答案: