Question

当点击加号按钮时，我试图让this fiddle中的引号显示淡入/淡出效果。我已经阅读了它并查看了类似的项目，但无法弄清楚。

我尝试添加这个（准备嘲笑我的尝试），但当然broke the damn thing：

$("#random-quote").click(function() { 
    $("#main-quote").fadeOut(300);
    $("#main-quote").fadeIn(300);
    }
};

非常感谢任何帮助，谢谢！

Answer 1

如果您希望在更改之前淡出文本，可以使用如下所示的淡出功能：

<强>淡出

$("#main-quote").fadeOut(300, function() {});

您可以将$('#main-quote').text();更改包含在此中，然后在结尾处致电fadeIn();：

<强>的jQuery

$("#main-quote").fadeOut(300, function() {
  $('#main-quote').text(selectedQuote.quote);
  var selectedBG = selectedQuote.background;
  var selectedMovie = selectedQuote.movie;
  console.log(selectedBG);
  console.log(selectedMovie);
  $("body").css("background-image", "url('" + selectedBG + "')");


  $('#main-quote').text(selectedQuote.quote);
  var selectedMovie = selectedQuote.movie;
  console.log(selectedMovie);
  $("#what-movie").html(selectedMovie);
  $("#main-quote").fadeIn(300);
});

此外，为了实现这一目标，您需要移除$('#random-quote').click(getQuote);行，因为您已经两次调用相同的点击功能，后者会进行两次背景更改。

JSFiddle

Answer 2

在css为transition设置background-image body;还删除了$('#random-quote').click(getQuote);

  transition: background-image 200ms ease-in-out;

的javascript

function getQuote() {
    var randomIndex = Math.floor(Math.random() * quotes.length);
    var selectedQuote = quotes[randomIndex];
    // `.fadeOut` here
    $('#main-quote').fadeOut(200).text(selectedQuote.quote);
    var selectedBG = selectedQuote.background;
    console.log(selectedBG);
    $("body").css("background-image", "url('" + selectedBG + "')");
    // `.fadeIn` here
    $('#main-quote').text(selectedQuote.quote).fadeIn(200);
    var selectedMovie = selectedQuote.movie;
    console.log(selectedMovie);
    $("#what-movie").html(selectedMovie);
}

jsfiddle https://jsfiddle.net/hanyb9da/36/

Answer 3

尝试fadeOut整个框，然后运行该函数来更改文本：

$('#main-box').fadeOut(800,function(){
    $("body").css("background-image", "url('" + selectedBG + "')");
    $('#main-quote').text(selectedQuote.quote);
    $(this).fadeIn(500)
});

同时使＃34;顺利＆＃34;后台更改使用transition：

body {
    transition:all .3s linear;
}

Updated Fiddle

_{注意：我还删除了对函数getQuote()}的点击绑定

Answer 4

你可以用CSS3做到这一点。

.btn {
  background: red;
  padding: 20px;
  color:white;
  border:none;
  outline:none;
  transition: opacity .3s;
}
.btn:active {
  opacity: 0;
 }

<button class="btn">RAND</button>

FadeIn // FadeOut一些引用

4 个答案: