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);
        }
    });
});

Jquery每个循环进行过渡

1 个答案: