jQuery每個循環進行過渡

Question

因此，我幾乎完成了將本站點包裝為以下站點： http://dev1.envisionwebdesign.co/johnreid/campaign2.html，並想知道如何循環這種轉換。 每當元素.cam和.cam2出現在屏幕上時，我都希望重復過渡。

$(document).ready(function() {
    $(".cam1").transition({'position':'absolute','top':'450px','left':'500px',opacity:1},1);
$(".cam2").transition({'position':'absolute','top':'450px','left':'-500px',opacity:1},1);

    setInterval(function() {
            $(".cam1")                             
        .filter(":onScreen")            
             .transition({'position':'absolute','top':'100px','left':'-100px',opacity:1},1700);
             $(".cam2")                             
        .filter(":onScreen")            
             .transition({'position':'absolute','top':'0px','left':'200px',opacity:1},1700);

  }, 1150);  


});

Answer 1

這似乎可以滿足您的要求。 當您單擊離開時，它們將返回到原始位置。

$(document).ready(function() {
    $(".cam1").transition({'position':'absolute','top':'450px','left':'500px',opacity:1},1);
    $(".cam2").transition({'position':'absolute','top':'450px','left':'-500px',opacity:1},1);
    //may want to rethink what you click on to make this happen and also add your scroll event to trigger the following
    $('a').click(function(){
        if($('a.active').attr('href') != '#5'){
            $(".cam1").css({'position':'absolute','top':'450px','left':'500px',opacity:1},1);
            $(".cam2").css({'position':'absolute','top':'450px','left':'-500px',opacity:1},1);
        }
        if($('a.active').attr('href') == '#5'){
            $(".cam1").transition({'position':'absolute','top':'100px','left':'-100px',opacity:1},1700);
            $(".cam2").transition({'position':'absolute','top':'0px','left':'200px',opacity:1},1700);
        }
    });
});