Question

我在jQuery中创建了一个滑块，可以在单击按钮时显示和隐藏div。但问题是它不顺畅，并且在幻灯片动画期间会跳跃。我已经尝试了所有的东西，从更改宽度到用填充替换边距，但没有任何工作。问题在哪里？

HTML：

 <button class="show-btn"><a>Show Slider</a></button>

 <!-- slider -->
    <div class="slider" id="slider">
            <div class="container">
                <div class="row">
                    <div class="col-lg-12 col-md-12 slider-wrap">
                        <div class="row">
                            <div class="col-lg-12 col-md-12">
                                <ul class="top list-inline dev-icons top">
                                    <li class="col-lg-3 col-md-3 col-sm-3 col-xs-6"><a href="#"><i class="devicon-html5-plain-wordmark"></i></a></li>
                                    <li class="col-lg-3 col-md-3 col-sm-3 col-xs-6"><a href="#"><i class="devicon-css3-plain-wordmark"></i></a></li>
                                    <li class="col-lg-3 col-md-3 col-sm-3 col-xs-6"><a href="#"><i class="devicon-javascript-plain"></i></a></li>
                                    <li class="col-lg-3 col-md-3 col-sm-3 col-xs-6"><a href="#"><i class="devicon-jquery-plain-wordmark"></i></a></li>
                                </ul>
                                <ul class="bottom list-inline dev-icons">
                                    <li class="col-lg-3 col-md-3 col-sm-3 col-xs-6"><a href="#"><i class="devicon-photoshop-plain"></i></a></li>
                                    <li class="col-lg-3 col-md-3 col-sm-3 col-xs-6"><a href="#"><i class="devicon-php-plain"></i></a></li>
                                    <li class="col-lg-3 col-md-3 col-sm-3 col-xs-6"><a href="#"><i class="devicon-laravel-plain-wordmark"></i></a></li>
                                    <li class="col-lg-3 col-md-3 col-sm-3 col-xs-6"><a href="#"><i class="devicon-mysql-plain-wordmark"></i></a></li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>

             <button class="hide-btn"><a>Hide</a></button>

            </div>
        </div> <!-- slider end -->

CSS：

.slider {
    text-align: center;
    padding: 40px 0;
    background-color: rgba(24, 188, 156, 0.09);
    box-sizing: border-box;
    display: none;
    border-left: solid 10px #2C3E50;
    border-right: solid 10px #2C3E50;
    border-bottom: solid 10px #2C3E50;
}

.dev-icons {
    font-size: 7em;
}

.slider li a {
    text-decoration: none;
}

.top {
    padding-bottom: 45px;
}

.slider-wrap {
    padding-bottom: 30px;
}

.hide-btn {
    background: none;
    border: 0;
    background-color: #2C3E50;
    padding: 15px 25px;
    border-radius: 10px;
}

jQuery的：

$(".show-btn").click(function(){
    $(".slider").slideDown();
    $(this).fadeOut();
}); 

$(".hide-btn").click(function(){
    $(".slider").slideUp();
    $(".show-btn").fadeIn();    
});

//scroll down on the page upon click

$(".show-btn").click(function() {
    $('html, body').animate({
        scrollTop: $(".slider").offset().top + (40)
    }, 500);
});

Answer 1

当.fadeOut()完成时，它会设置导致跳跃的display: none;样式。

将此用于fadeOut：

$(this).animate({ opacity: 0 });

使用它来淡化：

$(".show-btn").animate({ opacity: 1 });

Answer 2

我在这个问题上给出了一个非常全面的理由 here ，希望你会发现它有用。它很好地回答了你的问题。

总结。您用来操作DOM的函数是

.slideDown（）;

.slideUp（）;

你应该使用

Opacity或visibility

正如@Leroy提到的那样。

为什么我的jquery滑块跳得很厉害？

2 个答案: