了slideDown（）是完美流暢，動畫（）不是

Question

的slideDown()和slideUp()職能的工作很順利地在一個div：

slideUp(el, done) { 
    $(el).slideUp(); 
}, 
slideDown(el, done) { 
    $(el).slideDown(); 
}, 

但是，如果我嘗試和改變的animate()功能，這樣我就可以有一個褪色，它變得生澀/波濤洶涌：

slide(el, done) { 
    $(el).animate({ 
     opacity: "toggle", 
     height: "toggle" 
    }, 500, "linear"); 
}, 

任何想法爲什麼？

我特別不明白的是，爲什麼只有animate（）是生澀的 - 即使我所有的動畫都是高度。如果我換出slideUp（）和slideDown（）的動畫，它可以順利運行。

Answer 1

我想你想要這樣的東西。

function toggleSlider() { 
    if ($("#Slides").is(":visible")) { 
     $("#Fades").animate(
      { 
       opacity: "0" 
      }, 
      600, 
      function(){ 
       $("#Slides").slideUp(); 
      } 
     ); 
    } 
    else { 
     $("#Slides").slideDown(600, function(){ 
      $("#Fades").animate(
       { 
        opacity: "1" 
       }, 
       600 
      ); 
     }); 
    } 
} 

工作演示上Codepen http://codepen.io/norcaljohnny/pen/yVPbKq

它也可以使用SlideFadeToggle實現了另一種方式。

$.fn.slideFadeToggle = function(speed, easing, callback) { 
 
     return this.animate({opacity: 'toggle', height: 'toggle'}, speed, easing, callback); 
 
}; 
 

 
$("button").click(function() { 
 
    $("#something").slideFadeToggle(); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="something" style="display:none;padding: 10px; background: rgb(238, 238, 238); padding-bottom: 1%;"> 
 
     
 
    <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce pulvinar tristique eros, nec hendrerit velit cursus at. Integer tincidunt ultricies mi, sit amet dictum velit euismod sit amet. Nunc facilisis enim sapien, eget mollis purus tempus sed. Duis eget tortor vel neque molestie hendrerit vel a ipsum. Nulla commodo eget felis nec dapibus. Nulla in aliquet augue. Nulla scelerisque condimentum lobortis. Suspendisse semper interdum turpis, laoreet condimentum quam luctus quis. Nulla in felis nec nulla dictum congue at nec est. Nam at dignissim mi, vel interdum nibh. Nam dapibus maximus neque, eu sagittis velit venenatis nec. Morbi eu mollis tortor, nec egestas justo. Duis et lacinia sapien, non ultricies velit. Etiam et lectus pretium, lobortis tellus sed, maximus massa. 
 

 
Pellentesque pharetra ac arcu id vulputate. Suspendisse tempus sodales rutrum. Nunc dignissim metus sed augue pulvinar, a lacinia nulla lobortis. Nullam sodales id ex in varius. Maecenas sit amet est ultrices, euismod lorem eget, malesuada sapien. Curabitur sit amet pretium sem. Phasellus vestibulum imperdiet mauris, vel lobortis sapien luctus ac. Donec eget fringilla erat. Vestibulum mollis nibh sit amet sodales pharetra. Cras et dui non sem sodales semper. Donec justo nulla, iaculis at gravida id, congue eget sem. Sed maximus ac nisl ac pulvinar. Cras dictum mauris eget lorem blandit, placerat molestie nibh varius. Sed a libero pellentesque, pulvinar urna aliquet, malesuada leo. 
 
    </p> 
 
    </div> 
 
<button>toggle</buttom>