Question

我正在研究一个随机的wiki查看器，它一直是一个障碍，但我终于到了我认为至少UI功能完成的地步。唯一的问题是，我在“随机”按钮上淡化了一些文本，并将其替换为iframe，然后在再次单击该按钮时将其删除，文本似乎不会淡入。任何想法？

https://codepen.io/EpicTriffid/pen/WOYrzg

$(document).ready(function() {

  //Random Button

  var but1status = "closed"
  var randFrame = ("#randframe")

  $(".button1").on("click",function () {
    var but = $(".button1");
    var cross = $("#cross1");
    but.animate({marginTop:"10%", width:"100%", height:"100vh"}, "fast");
    $(".b1text").animate({opacity:0});
    cross.delay(1000).fadeIn();
    but1status = "open"
    if (but1status == "open") {
      setTimeout(randFrame,1000)
      function randFrame (){
        $(".button1").html("<iframe class='randframe' src='demo_iframe.htm' height='100%' width='100%' style='border:none'></iframe>");
        $("#cross1").click(function() {
          $('.button1').removeAttr('style');          
          $("#cross1").fadeOut('fast');
          $('.randframe').remove();
          $(".b1text").animate({opacity:"1"});
        });
      };
    };
  });

Answer 1

您的按钮缺少文字Random

致电时：

$(".button1").html(...

您正在使用iframe替换对象的内部html。

当您删除.randframe时，您需要重新添加按钮的文字。

而不是：

$('.randframe').remove()

你可以调用它来完成两个任务：

$('.button1').html('random');

效率提示：您在保存对jquery变量but和cross的引用方面做得很好，为什么不使用它们？

but.html(...
cross.click(function (){...

Answer 2

当你这样做时，你正在清空.button1的HTML：

$(".button1").html(....

为了取回它，您需要添加：

$(".button1").html('<div class="b1text">Random</div>');

后

$('.randframe').remove();

Answer 3

尝试使用回调。所以将你的＃cross1 fadout改为

$("#cross1").fadeOut('fast',function(){
  $('.randframe').remove();
  $(".b1text").animate({opacity:"1"});
});

此外，这可能不会影响您的代码，但在某些变量声明后您会遗漏一些半冒号。

并非所有方法在JQuery中都有回调，但是在可用时，它们很有用，因为基本上它意味着在完成其他操作之前不会触发代码。这种情况会随着褪色和不透明而发生。

Answer 4

此行有效地取代了按钮1 div中的所有内容

$(".button1").html("<iframe class='randframe' src='demo_iframe.htm' height='100%' width='100%' style='border:none'></iframe>");

你的cross1.click函数没有重新填充button1 div，我建议

$("#cross1").click(function() {
  $('.button1').removeAttr('style');
  $('.button1').html('Random');
  $("#cross1").fadeOut('fast');
  $(".b1text").animate({opacity:"1"});
});

Answer 5

您可以使用解决方案https://codepen.io/Shiladitya/pen/WOLNpw

$(document).ready(function() {
  
  //Random Button
  
  var but1status = "closed"
  var randFrame = ("#randframe")
  
  $(".button1").on("click",function () {
    var but = $(".button1");
    var cross = $("#cross1");
    but.animate({marginTop:"10%", width:"100%", height:"100vh"}, "fast");
    $(".b1text").fadeOut();
    cross.delay(1000).fadeIn();
    but1status = "open"
    if (but1status == "open") {
      setTimeout(randFrame,1000)
      function randFrame (){
        $(".button1").html("<iframe class='randframe' src='demo_iframe.htm' height='100%' width='100%' style='border:none'></iframe>");
        $("#cross1").click(function() {
          but.removeAttr('style');
          cross.fadeOut('fast');
          $('.randframe').remove();
          but.html('<div class="b1text">Random</div>');
        });
      };
    };
  });
  
  
  
  //Search Button
  
  var but2 = "closed"
  
  $(".button2").click(function () {
    var but = $(".button2");
    var btext = $(".b2text");
    var cross = $("#cross2");
    but.animate({marginTop:"10%", width:"100%", height:"100vh"}, "fast");
    btext.fadeOut();
    cross.delay(2000).fadeIn()
    but2 = "open"
    
    $("#cross2").click(function() {
      $('.button2').removeAttr('style');      
      $('.b2text').fadeIn(1500);
      $("#cross2").fadeOut('fast');
    })
  })
                     
  
  
  
  
  
});

#spacer { 
  margin:0;
  padding:0;
  height:50px; 
}
body {
  min-height: 100%;
  min-width: 1024px;
  width:100%;
  margin-top:4em;
  padding:0;
  background-color: teal;
}
h1 {
  color:white;
  font-family:"cabin";
  text-align:center;
}
#cross1 {
  position:relative;
  font-size:3em;
  color:white;
  margin-top:6px;
  float: left;
  display:none;
}
#cross2 {
  position:relative;
  font-size:3em;
  color:white;
  margin-top:6px;
  float: right;
  display:none;
}
#randframe {
  display:none;
}
.button1 {
  position:absolute;
  height:2.6em;
  width:5em;
  
  font-size:1.5em;
  text-align:center;
  color: white;
  font-family:"cabin";
  
  border:solid;
  border-radius:25px;
  padding:10px;
  box-sizing:border-box;
  
  transition: all 2s ease;
}
.button2 {
  position:absolute;
  right:0;
  height:2.6em;
  width:5em;
  
  font-size:1.5em;
  text-align:center;
  color: white;
  font-family:"cabin";
  
  border:solid;
  border-radius:25px;
  padding:10px;
  box-sizing:border-box;
  
  transition: all 2s ease;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<head>
  <link href="https://fonts.googleapis.com/css?family=Josefin+Slab" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css?family=Crimson+Text" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css?family=Cabin" rel="stylesheet">
  <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
</head>

<div class="container">
  <div class="row">
    <div class="col-xs-12">
      <h1>Wiki Viewer</h1>
    </div>
  </div>
</div>

<div id="spacer"></div>

<div class="container">  
  <div class="row">
    <div class="col-xs-12">
      <div class="button1">
        <div class="b1text">Random</div>
      </div>
      <div class="button2">
        <div class="b2text">Search</div>
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col-xs-12">
      <div class="text-center">
        <i id="cross1" class="glyphicon glyphicon-remove"></i>
      </div>
    </div>
    <div class="col-xs-12">
      <div class="text-center">
        <i id="cross2" class="glyphicon glyphicon-remove"></i>
  </div>
</div>

删除iframe后，您需要将内容保留在“.button1”内以便重复使用。

褪色的文字不再出现

5 个答案: