0

我在动画不断排队和翻转时遇到问题。我在这方面花了太长时间，我需要一些认真的帮助，哈哈。您的帮助将不胜感激:)

所以我想要实现的是在“用户”滚动到标题/横幅之后，导航和徽标重新调整大小并将其自身固定到查看窗口的顶部。因此，当他们滚动时，它会停留在顶部，因此他们可以在页面上的任何位置使用导航，当他们返回顶部时，它会全部变回之前的标题/横幅。

现在我的问题是，当它更改徽标并使其淡入淡出时，如果您上下滚动到顶部几次，它们会排队并不断淡入淡出，看起来真的很麻烦……我不确定如何解决这个问题。（顺便说一句，下面的一些代码运行良好，但并非全部相关，问题在于#banner & #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>

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

4

2 回答 2

2

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

这是应用于您的代码时的用法示例。

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

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

于 2013-04-03T04:16:24.950 回答
1

if ($(window).scrollTop() >= 200)true//一旦传递 200 ，就会产生 这种情况，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'
            });
        }
    }
});
于 2013-04-03T04:20:13.660 回答