Question

我需要使用jquery动画来淡入淡出和淡出类隐藏。

我的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").removeClass('hidden').fadeIn(500);
    }
    else
    {
       $("#perNum").text("+2");
       $(".picture-hidd").addClass('hidden').fadeOut(500);
    }
}

Answer 2

试试这个

 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 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>

淡化切换jquery元素

3 个答案: