jquery 动画在关闭时出现两次

Jquery Animation Occurs Twice on Close

本文关键字：两次 动画 jquery      更新时间：2023-09-26

我有这些称为标签的div，它们很小，然后当您单击它们时，它们会展开并显示其中的隐藏元素。 X （

<跨度> X

） 也会出现。单击此 X 时，此标记 （div） 应关闭。

在 Firefox 中，标签可以正常打开。然后在关闭时关闭并重新打开。我不知道为什么收盘后是开盘。

顺便说一句，我根本无法让前 3 行工作。

请记住，它在Chrome上工作正常。所以Firefox对Jquery的解释是不同的

。

.HTML

    <div class="row row1">
      <div id="tag1" class="tag">
        <p class="p1">Header</p>
        <video id="VideoA1" class="VideoA" name="media">
          <source src="">
          <source src="" type="video/mp4">
          <source src="" type="video/mv4">
        </video>
        <p id="X"><span id="X" class="glyphicon glyphicon-remove" aria-label="Close"></span></p>
        <iframe id="player1" class="ytplayer" width="390" height="220" src="" frameborder="0" allowfullscreen></iframe>
        <p class="text">Random Text</p>
      </div>
   </div>

简讯

//This will make the tags expand to take up the whole row when clicked
   $(".row .tag").on('click', function(event1){
 if(event1.target.id == "tag1") {
   alert("hello");
   return; //Do nothing if the X is closed
 }
else {
$(this).siblings().hide();
$(this).animate({
  width:"98%",
});
$(".VideoA", this).css('display', 'none');
$("img", this).addClass('offleft');
$(".tag").hover(function(){
  $(this).css("cursor","default")
});
$(".glyphicon-remove", this).delay(1000).show();
$(".glyphicon-remove", this).parent().show();
$('iframe',this).show();
$('.text',this).show();
}
});

$(".row1 .glyphicon-remove").click(function(){
 var clicked = this;
 $(this).parent().hide();
 $(".row1 iframe").hide();
 $(".row1 .text").hide();
 $(this).parent().parent().animate({
   width: "400px",
 },function(){
  $(".row1 .VideoA").show();
  $("img", this).removeClass('offleft');
  $(".tag",this).css('cursor','pointer');
  $(clicked).parent().parent().siblings().show();
});
event.stopPropagation();
});

$(".row2 .glyphicon-remove").click(function(){
var clicked = this;
$(this).parent().hide();
$(".row2 iframe").hide();
$(".row2 .text").hide();
$(this).parent().parent().animate({
  width: "400px",
},function(){
  $(".row2 .VideoA").show();
  $("img", this).removeClass('offleft');
  $(".tag",this).css('cursor','pointer');
  $(clicked).parent().parent().siblings().show();
  });
  event.stopPropagation();
});

event是未定义的。

$(".row2 .glyphicon-remove").click(function(event){注入event，否则stopPropagation是没有用的。

我认为，Chrome 很严格，并且在undefined它停止对当前函数的评估，即当它遇到undefined值并停止对该特定闭包的评估 JS 时，它会抛出错误。

然而，似乎 firefox 继续评估并将click冒泡到 DOM 树上。因此，在您的情况下，单击event需要由您的函数使用，因此需要通过调用 event.stopPropagation() 并将event注入您的闭包来手动stopPropagation，或者您也可以简单地在函数末尾return false，因为它是一个 jquery 事件对象，与调用 event.preventDefault() 和 event.stopPropagation() 相同。

例如

    $(".row2 .glyphicon-remove").click(function(event){
    //stop propagation for the event but continue to evaluate current function
    event.stopPropagation(); 
      var clicked = this;
      $(this).parent().hide();
      $(".row2 iframe").hide();
      $(".row2 .text").hide();
      $(this).parent().parent().animate({
        width: "400px",
      },function(){
        $(".row2 .VideoA").show();
        $("img", this).removeClass('offleft');
        $(".tag",this).css('cursor','pointer');
        $(clicked).parent().parent().siblings().show();
      });
    return false; //jquery event stop propagation + prevent default    
    });
相关文章：