1
どのようにして複数のdivで同時に関数（アニメーションはアニメーション、オプションでjqueryを使用します）を実行しますか？複数のdivで同時にどのように関数を実行しますか？
は、アニメーションは、中心のdivの左側と右側のdivの上で同時に再生するよう、それを拡張しようとするとhttp://trendmedia.com/news/infinite-rotating-images-using-jquery-javascript/
スタート。 IDからクラスに変更されましたが、1つのdivで再生され、次に別のdivで再生されます。同時に両方で演奏したいですか？
$(window).load(function() { //start after HTML, images have loaded
var InfiniteRotator = {
init: function() {
//initial fade-in time (in milliseconds)
var initialFadeIn = 1000;
//interval between items (in milliseconds)
var itemInterval = 5000;
//cross-fade time (in milliseconds)
var fadeTime = 2500;
//count number of items
var numberOfItems = $('.rotating-item').length;
//set current item
var currentItem = 0;
//show first item
$('.rotating-item').eq(currentItem).fadeIn(initialFadeIn);
//loop through the items \t \t
var infiniteLoop = setInterval(function() {
$('.rotating-item').eq(currentItem).fadeOut(fadeTime);
if (currentItem == numberOfItems - 1) {
currentItem = 0;
} else {
currentItem++;
}
$('.rotating-item').eq(currentItem).fadeIn(fadeTime);
}, itemInterval);
}
};
InfiniteRotator.init();
});.rotating-item-wrapper {
position: relative;
width: 320px;
height: 240px;
/* background-color: red; */
}
.rotating-item {
display: none;
position: absolute;
top: 0;
left: 0;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<body>
<div class="centered-content row">
<div class="column rotating-item-wrapper">
<img src="http://cdn1-www.dogtime.com/assets/uploads/gallery/siberian-husky-dog-breed-pictures/siberian-husky-dog-breed-pictures-1.jpg" class="rotating-item" width="320" height="240"/>
<img src="http://cdn1-www.dogtime.com/assets/uploads/gallery/siberian-husky-dog-breed-pictures/siberian-husky-dog-breed-pictures-2.jpg" class="rotating-item" width="320" height="240"/>
<img src="http://cdn1-www.dogtime.com/assets/uploads/gallery/siberian-husky-dog-breed-pictures/siberian-husky-dog-breed-pictures-3.jpg" class="rotating-item" width="320" height="240"/>
<img src="http://cdn2-www.dogtime.com/assets/uploads/gallery/siberian-husky-dog-breed-pictures/siberian-husky-dog-breed-pictures-6.jpg" class="rotating-item" width="320" height="240"/>
</div>
<div class="column">
Texty stuff
</div>
<div class="column rotating-item-wrapper">
<img src="https://blogs-images.forbes.com/kbrauer/files/2016/04/2017-Ford-GT-Red-Black.jpg?width=960" class="rotating-item" width="320" height="240"/>
<img src="https://www.ford.com/campaignlibs/content/dam/ford_com/en_us/gtreveal/doc_part_2_1.jpg" class="rotating-item" width="320" height="240"/>
<img src="https://2.bp.blogspot.com/-OSLF3ue4tbc/Vczt0IPTHHI/AAAAAAAAG-0/zdQ82j3gQPU/s1600/Forza-Motorsport-6-Ford.jpg" class="rotating-item" width="320" height="240"/>
<img src="https://blogs-images.forbes.com/kbrauer/files/2016/04/2017-Ford-GT-Red-Black.jpg?width=960" class="rotating-item" width="320" height="240"/>
</div>
</div>
</body>
可能な重複（http://stackoverflow.com/questions/1251300/how-to-run-two-jquery用-animations-同時に）SOの質問。 –
同じソリューション（複数のdivにまたがるアニメーション）を求めていますが、アプローチは異なります（複数のIDを使用しない）ので、問題を解決する別の方法として有益です。 私はこのソリューションを好む...それは私のコードを使用しているため:)、より柔軟です。 – kalmdown