Fade切換jquery元素

Question

我需要使用jquery使用動畫切換淡入和淡出類名爲hidden。

我的jquery看起來像這樣：

function slide() { 
    $('.additional-perspectives medium-picture shadow last').slideToggle("fast"); 
    ($("#perNum").text() === "+2") ? 
     $("#perNum").text("Changed") + $(".picture-hidd").removeClass('hidden') : 
     $("#perNum").text("+2") + $(".picture-hidd").addClass('hidden'); 
} 

當類隱刪除的元素將在0.5秒時，褪色當類隱添加元素淡出0.5秒。

Answer 1

試試這個

function slide() { 
    $('.additional-perspectives medium-picture shadow last').slideToggle("fast"); 
    if($("#perNum").text() === "+2") 
    { 
     $("#perNum").text("Changed"); 
     $(".picture-hidd").fadeIn(1000, function() { 
      $(".picture-hidd").removeClass('hidden'); 
     }); 

    } 
    else 
    { 
     $("#perNum").text("+2");   
     $(".picture-hidd").fadeOut(1000, function() { 
       $(".picture-hidd").addClass('hidden'); 
      }); 
    } 
} 

Answer 2

試試這個：

function slide() { 
    $('.additional-perspectives medium-picture shadow last').slideToggle("fast"); 
    if($("#perNum").text() === "+2") 
    { 
     $("#perNum").text("Changed"); 
     $(".picture-hidd").removeClass('hidden').fadeIn(500); 
    } 
    else 
    { 
     $("#perNum").text("+2"); 
     $(".picture-hidd").addClass('hidden').fadeOut(500); 
    } 
} 

Answer 3

，你可以切換一類這樣的：

---

$('#fade').click(function(){ 
 
    $('.fadeable').toggleClass("fade"); 
 
    });

.fadeable{ 
 
    opacity:1; 
 
    transition:all 0.5s; 
 
    } 
 
.fade{ 
 
    opacity:0; 
 
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="fadeable">I am going to fade</div> 
 
<button id="fade">Toggle Fade</button>

---