Question

我对我创建的脚本有一个奇怪的问题。我的jQuery / Javascript技能并不好（我还在学习），我希望有人能帮助我理解为什么会这样。

我正在开发一个网上商店，并在顶部有一条4个div，它们彼此相邻，并附有通知，我想向我的客户强调。

该网站具有响应性，因此对于移动设备，我希望一次将其减少到一个通知，并在每个通知中淡出并淡出。

我也不想简单地使用CSS媒体查询来显示和隐藏桌面和移动版本，因为我认为这可能会对我产生影响，如果我要重复两次内容，那么SEO也是如此。因此，我整理了一个jQuery脚本来获取第一组div的内容，将它们放入一个数组中，并在循环中淡入和淡出每个通知。

我以为我已经完成了它，但是在Firefox和Chrome中都注意到了一些奇怪的东西：它一直很好地循环，但是当显示＆＃34; 100％幸福保证时，它会完全停止＆＃34;第二次，我为什么不知所措。

我已使用此处使用的代码创建了一个JSFiddle： http://jsfiddle.net/qewwmnge/

$(document).ready(function() {

    // Transform the highlights div into a 1 line bar for mobile devices

    // Read the highlights div content into an array
    var highlights = new Array();
    $("#highlights").find("div").each(function(){
        highlights.push($(this).html());
    });

    $text = $('#highlights-mobile div'),
    delay = 5;

    // Set the initial highlight item on page load
    $text.html( highlights[0] );

    // Loop through the array and fade in each highlight
    function loop ( delay ) {
        $.each( highlights, function ( i, elm ){
            if ($text.html() != highlights[i]) { // Skip the first fade in on the first loop so it doesn't repeat itself
                $text.delay( delay*1E3).fadeOut();
                $text.queue(function(){
                    $text.html( highlights[i] );
                    $text.dequeue();
                });
                $text.fadeIn();
                $text.queue(function(){
                    if ( i == highlights.length -1 ) {
                        loop(delay);   
                    }
                    $text.dequeue();
                });
            }
        });
    }
    loop( delay );

});

如果有人能告诉我自己做错了什么，我真的很感激！

Answer 1

您的jQuery代码包含队列/出队逻辑，没有必要这样做。

最好使用简单的jquery来做同样的事情。请参阅此演示JSFiddle

$(function () {
    var $highlights = $("#highlights-mobile div");
    var divsHTML = new Array();
	$("#highlights").find("div").each(function(){
	 divsHTML.push($(this).html());
	});
    
    var position = -1;
    
    !function loop() {
        position = (position + 1) % divsHTML.length;
        $highlights.html(divsHTML[position])
        .fadeIn(1000)
        .delay(1000)
        .fadeOut(1000,loop);
    }();
});

#highlights, #highlights-mobile {
	background-color: #E8E8E8;
	border-top-left-radius: 4px;
	border-top-right-radius: 4px;
	border-bottom-left-radius: 4px;
	border-bottom-right-radius: 4px;
	position: relative;
	display: block;
	box-sizing: border-box;
	overflow: auto;
	text-align: center;
	margin-bottom: 20px;
}

#highlights h4, #highlights-mobile h4 {
	text-align: center;
	font-weight: bold;
	padding: 0;
	margin: 0;
	font-size: 1.2em;
}

#highlights-mobile {
	padding: 10px;
}

#highlights-mobile a, #highlights a {
	color: #444;
	text-decoration: none;
}

#highlights div {
	text-align: center;
	padding: 10px;
	border-right: 1px solid #CDCDCD;
	color: #444;
	overflow: auto;
	display: inline-block;
	}



@media (min-width: 768px) {
	#highlights {
		display: block;
	}

	

	#highlights div:last-child {
	border-right: none;
	}
}



@media (min-width: 768px) {
	#highlights div {
	text-align: center;
	padding: 10px;
	border-right: 1px solid #CDCDCD;
	color: #444;
	overflow: auto;
	display: inline-block;
	}

	#highlights div:last-child {
	border-right: none;
	}

	#highlights h4 {
	text-align: center;
	font-weight: bold;
	padding: 0;
	margin: 0;
	font-size: 1.2em;
	}

	#highlights a {
	color: #444;
	text-decoration: none;
	}

	#highlights-mobile {
		display: none;
	}
}



@media (max-width: 767px) {

	#highlights {
		display: none;
	}
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="highlights-mobile">
	<div style="display: block;">
	</div>
</div>

<div id="highlights">
	<div>
		<a href="/refurbishment-process"><h4>Professionally refurbished</h4>Old school gear, good as new</a>
	</div>
	<div>
		<h4>Free shipping</h4>On orders over $250, nation wide
	</div>
	<div>
		<a href="/happiness-guarantee"><h4>100% happiness guarantee</h4>Easy returns and a 60 day warranty</a>
	</div>
	<div>
		<a href="/bitcoin"><h4>5% off your order</h4>When you pay with Bitcoin</a>
	</div>
</div>

jQuery循环在特定位置暂停

1 个答案: