jQuery的轉變：在加載後爲每一次點擊，一個addClass

嗯，讓我試着解釋我的GOL：我做了一個小項目（隨機報價機從ferecodecamp.com），它是相當的功能。但是我想讓它變成幻燈片（Power Point）。jQuery的轉變：在加載後爲每一次點擊，一個addClass

該頁面應該從零不透明加載作出過渡報價總。 2。當我點擊按鈕生成，它應改變報價，並再次，它應該是一個報價thate來自0不透明度爲1

的CSS可能是這樣的：

span, i, footer{ 
 
    opacity: 0; 
 
} 
 
.transitions { 
 
    transition-duration: 1s; 
 
    opacity: 1; 
 
}

跨度，I，頁腳從0到1上1秒的過渡持續時間不透明度。

我嘗試了一些jQuery的，但沒有進展順利的方式，我想

<script type="text/javascript"> 
 
//for page load 
 
     $(".quote").load(function(){ 
 
      $(".quote").addClass("transitions"); 
 
     }); 
 

 
//for new quote generated 
 
     $(".button").click(function() { 
 
      $(".quote").fadeOut("slow", function() { 
 
       $(this).addClass("quote"); 
 
      }); 
 
      $(".quote").fadeIn("slow", function() { 
 
       $(this).addClass("quote"); 
 
      }); 
 
     }); 
 
    </script>

拳部分沒有在所有的工作。 .load事件從來沒有工作過，並且.ready只能用於.click事件。

第二部分，partialy的作品，但它首先desapears和apears後。我想被desapeared（0不透明度）以總價apear ...

我已經嘗試了兩個長天，沒有什麼會真的很好。我會很高興看到一些建議。在此先感謝！

來源

2017-01-22 samu101108

我會做這樣的：

// equivalent to $(document).ready(function() 
$(function() { 

    // define an array of elements to fade 
    var elements = [$('#quote'), $('#author')]; 

    fade(); // call a custom function defined below which will execute on page load 

    // on .button click, call the same function 
    $('.button').click(fade); 

    function fade() { 
    // for each element in elements (defined above), execute jQuery's hide() method and then fadeIn() 

    $.each(elements, function(index, element) { 
     element.hide().fadeIn(); 
    }); 
    } 
});

如果您project內粘貼在控制檯，它很好地工作。

來源

2017-01-22 04:27:01

它也很棒！但對我來說看起來更復雜一點。 – samu101108

我會添加註釋，以幫助解釋。 –

我和意見進行更新。如果您不瞭解某些內容，請提問。恭喜從freecodecamp開始！ –

注：$.load() jQuery的1.8版已被否決。

這應該是你想要的東西：

$(document).ready(function(){ 
 
    $(".quote").fadeIn(1000); 
 
}); 
 

 
$(".button").click(function() { 
 
    $(".quote").fadeOut(1000, function() { 
 
     // change the quote here 
 
     $(".quote").fadeIn(1000); 
 
    }); 
 
});

.quote { 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button class="button">new</button> 
 

 
<div class="quote">quote</div>

來源

2017-01-22 04:12:22

差不多... 我真的需要學習更多...我想我永遠不會知道棄用的.load事件.... 但事實上，這是一個完美的解決方案！獨特的改變是淡出到零，它成爲我從一開始就打算的！大！ – samu101108

jQuery的轉變：在加載後爲每一次點擊，一個addClass

回答

相關問題