Question

我遇到了动画不断排队和翻转的问题。我花了太长时间在这上面，我需要一些认真的帮助大声笑。非常感谢您的帮助：）

所以我想要实现的是在'用户'滚过标题/横幅之后，导航和徽标重新调整大小并将其自身固定到查看窗口的顶部。因此，当它们滚动时，它会保持在顶部，因此它们可以在页面的任何位置使用导航，当它们返回到顶部时，它们都会更改回上一个标题/横幅。

现在我的问题是，当它改变徽标并淡化它们时，如果你向上和向下滚动几次并且看起来真的非常错......它们会排队并继续淡入淡出......我我不知道如何解决这个问题。（顺便说一下下面的一些代码工作正常，并不是全部相关，问题出在#banner＆amp; #banner_mini）

 <script>
$(document).ready(function() {
    var yOffset = $("#header").offset().top;
    $(window).scroll(function() {
        if ($(window).scrollTop() >= 200) {
            $("#header").css({
                'top': 0,
                'background-color' : '#000',
                'position': 'fixed',
                'filter': 'alpha(opacity=90)',
                'height': '50px',
                '-moz-opacity': '0.9',
                '-khtml-opacity': '0.9',
                'opacity': '0.9'
            });
            $("#banner").fadeOut(100).delay(400);
            $("#banner_mini").fadeIn(300);
            $("#menu").css({'margin-top':'0px'});
            $("#menu ul li a").css({'font-size':'12px', 'padding':'5px', 'margin-top':'0px'});

        } else {
            $("#header").css({
                'background-color' : '',
                'top': yOffset + 'px',
                'position': 'absolute',
                'height': '200px',
                'filter': 'alpha(opacity=100)',
                '-moz-opacity': '1',
                '-khtml-opacity': '1',
                'opacity': '1'
            });
            $("#banner_mini").fadeOut(100).delay(400);
            $("#banner").fadeIn(300);
            $("#menu ul li a").css({'font-size':'14px', 'padding':'10px', 'margin-top':''});
            $("#menu").css({'margin-top':'147px'});
            }
    });
});

</script>

这两个div正在发生变化：

<div id="banner">
        <img src="img/Logo_PNG_edit.png"  width="193" height="187" />
        </div>
        <div id="banner_mini" style="display:none">
        <img src="img/Logo_mini.png" width="162" height="29">
        </div>

我真的很感激有任何帮助来解决这个问题吗？

Answer 1

您需要使用jQuery .stop()。它将停止所有当前正在运行的动画。在开始下一个动画之前执行此操作。

以下是应用于代码时的使用示例。

$("#banner").stop(true, true).fadeOut(100).delay(400);
$("#banner_mini").stop(true, true).fadeIn(300);

传递true时，第一个参数将清除队列。第二个参数将当前动画移动到它的结束状态。

Answer 2

if ($(window).scrollTop() >= 200) //一旦你传递200 true，这个条件会产生scrollTOP，即它将在201,210,500,600等处调用，依此类推else部分。

所以，只要检查一下，他们是否已经达到了你想要的position。

var yOffset = $("#header").offset().top;
$(window).scroll(function () {

    if ($(window).scrollTop() >= 200) {
        if ($("#header").css('position') !== 'fixed') {
            $("#header").css({
                'top': 0,
                'background-color': '#000',
                'position': 'fixed',
                'filter': 'alpha(opacity=90)',
                'height': '50px',
                '-moz-opacity': '0.9',
                '-khtml-opacity': '0.9',
                'opacity': '0.9'
            });
            $("#banner").fadeOut(100).delay(400);
            $("#banner_mini").fadeIn(300);
            $("#menu").css({
                'margin-top': '0px'
            });
            $("#menu ul li a").css({
                'font-size': '12px',
                'padding': '5px',
                'margin-top': '0px'
            });
        }
    } else {
        if ($("#header").css('position') !== 'absolute') {
            $("#header").css({
                'background-color': '',
                'top': yOffset + 'px',
                'position': 'absolute',
                'height': '200px',
                'filter': 'alpha(opacity=100)',
                '-moz-opacity': '1',
                '-khtml-opacity': '1',
                'opacity': '1'
            });
            $("#banner_mini").fadeOut(100).delay(400);
            $("#banner").fadeIn(300);
            $("#menu ul li a").css({
                'font-size': '14px',
                'padding': '10px',
                'margin-top': ''
            });
            $("#menu").css({
                'margin-top': '147px'
            });
        }
    }
});

jQuery - 淡入淡出带徽标的bug

2 个答案: