Question

((LoggerContext) LoggerFactory.getILoggerFactory()).getLogger("org.mongodb.driver").setLevel(Level.ERROR);和slideDown()函数在div上运行非常顺利：

slideUp()

但是，如果我尝试将其更改为slideUp(el, done) { $(el).slideUp(); }, slideDown(el, done) { $(el).slideDown(); },功能，那么我也可以褪色，它会变得生涩/不稳定：

animate()

任何想法为什么？

我特别不明白为什么只有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>

slideDown（）非常流畅，animate（）不是

1 个答案: