jQuery slideTo切換開始褪色

Question

我想使用jQuery在單擊按鈕時切換0.3和1.0之間的元素的不透明度。
我遇到的問題是，以0.3的不透明度啓動元件，然後在第一次單擊時使其完全可見，並使用1.0不透明度。 我已經試過代碼如下：

$(document).ready(function(){ 

    //Start faded to 0.3 
    $(".fadingElement").fadeTo(0, 0.3); 

    //When the trigger is clicked first, fade the relevant item back up to 1.0 
    $("div.trigger").toggle(
     function(){ 
      $(this).parent().next().fadeTo('fast', 1.0); 
     }, 
     function() { 
      $(this).parent().next().fadeTo('fast', 0.3); 
     } 
    ); 
}); 

當點擊「div.trigger」，它不褪色了，就再點擊時，它消失將另外0.3！當第三次點擊時，它會消失到0.3的起始點。

如何在0.3處啓動元素，並在第一次點擊時將其恢復爲完全可見（1.0）？這裏發生了什麼？

Answer 1

問題（根據您的提琴的代碼）是，你真的想淡出元素是<div class="student_notified"> ，但是您的代碼正在淡化該div的父級，而不是div本身。

可以使用find方法到其父項內選擇正確的元素：

$(this).parent().next().find(".student_notified").fadeTo('fast', 0.3); 

這裏是一個updated fiddle。

Answer 2

你可以簡單地使用.animate()與.css('opacity',value)實現這一行爲

例子：

$("div.trigger").toggle(
$(this).parent().next(); 
    $(this).parent().next().animate({opacity:1.0}); 
}, 
function() { 
    $(this).parent().next().animate({opacity:0.3}); 
    }); 
} 
);